[항해99] 자바스크립트 문법 뽀개기 (내용정리)

자바스크립트 기본적인 문법들을 배웠다

IDE는 visual studio code를 이용하고 node.js 를 설치해서 터미널에서 console.log 하며 공부했다

 

 

# 필수 프로그램 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

https://nodejs.org/en/

Node.js

 

 

# 문법 공부 전 프로그래밍, 자바스크립트 정의

 

 

# 첫 시작

 

 

console.log('Hello World')
// Hello World 라는 문자열을 출력하는 명령어입니다.

 

 

# 변수

 

 

let name = 'penguin' 		//name이라는 변수에 penguin 이라는 값을 할당
console.log(name) 		//변수 name이 가리키고 있는 값 penguin 을 출력
name = 'cho' 			//위에서 선언했던 name이라는 변수에 "cho"이라는 값을 재할당
console.log(name) 		//변수 name이 가리키고 있는 값 "William"을 출력

 

 

 

const name = "penguin" 		//name이라는 변수에 "penguin"이라는 값을 할당
console.log(name) 		//변수 name이 가리키고 있는 값 "penguin"을 출력
name = "cho" 			//위에서 선언했던 name이라는 변수에 "cho"이라는 값을 다시 재할당하려는 것이지만 실패. 에러 발생!

 

 

# 데이터 타입

 

 

 

console.log(10) 	// 10을 출력
const myAge = 37
const yourAge = 25
console.log(myAge) 	// 37을 출력
console.log(yourAge) 	// 25를 출력

 

 

const firstName = 'Sinrok'
const lastName = 'Kim'
console.log(firstName) 	// Sinrok을 출력
console.log(lastName) 	// Kim을 출력

 

 

const isMan = true
const isWoman = false
console.log(isMan)
console.log(isWoman)

 

 

let name1 = null
console.log(name) 	// null을 출력
let name2
console.log(name2) 	// undefined를 출력

 

 

# 연산자

 

 

console.log('My' + ' car') 	// My car를 출력
console.log('1' + 2) 		// 12를 출력

 

 

const shoesPrice = 200000
console.log(`이 신발의 가격은 ${shoesPrice}원입니다`)
// console.log('이 신발의 가격은 ' + shoesPrice + '원입니다') 와 동일
// + 를 활용한 문자열 붙이기보다 간결하게 표현할 수 있다는 게 보이시나요?
// 백틱을 사용해서 간략하게 표현 할 수 있습니다!

 

 

 

console.log(2 + 1) 	// 3을 출력
console.log(2 - 1) 	// 1을 출력
console.log(4 / 2) 	// 2를 출력
console.log(2 * 3) 	// 6을 출력
console.log(10 % 3) 	// 나머지(remainder) 연산자. 1을 출력
console.log(10 ** 2) 	// exponentiation. 10의 2승인 100을 출력

 

 

 

let count = 1
const postIncrement = count++

// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다.

// const postIncrement = count
// count = count + 1

console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 1, postIncrement: 2

 

혹시 count 변수를 const 가 아닌 let 구문으로 선언한 이유를 눈치채셨나요?
우리가 증감연산자를 활용해 count의 값을 계속 증가시키고 다시 count에 할당하고 있기 때문에
const를 사용하면 에러가 발생해요!

 

 

 

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice 	// totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)

totalPrice += pantsPrice 	// totalPrice = totalPrice + pantsPrice 와 동일
console.log(totalPrice)

totalPrice -= shirtsPrice 	// totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice)

 

 

 

console.log(1 < 2) 	// 1이 2보다 작은가? true
console.log(2 <= 2) 	// 2가 2보다 작거나 같은가? true
console.log(1 > 2) 	// 1이 2보다 큰가? false
console.log(1 >= 2)	// 1이 2보다 크거나 같은가? false

 

 

 

 

let isOnSale = true
let isDiscountItem = true

console.log(isOnSale && isDiscountItem) 	// true && true 이므로 true
console.log(isOnSale || isDiscountItem) 	// true || true 이므로 true

isOnSale = false

console.log(isOnSale && isDiscountItem) 	// false && true 이므로 false
console.log(isOnSale || isDiscountItem) 	// false || true 이므로 true

isDiscountItem = false

console.log(isOnSale && isDiscountItem) 	// false && false 이므로 false
console.log(isOnSale || isDiscountItem) 	// false || false 이므로 false
console.log(!isOnSale) 				// !false 이므로 true

 

 

 

console.log(1 === 1)	 // true
console.log(1 === 2) 	// false
console.log('Javascript' === 'Javascript') 	// true
console.log('Javascript' === 'javascript') 	// 대소문자나 띄워쓰기도 다 정확히 일치해야 해요. 따라서 false

 

 

 

console.log(1 === "1") 	// false를 출력
console.log(1 == "1" 	// true를 출력

 

 

# 조건문

 

 

const shoesPrice = 40000
if (shoesPrice < 50000) { 	// 신발 가격이 50000원보다 작으므로 해당 코드가 실행됨
	console.log('신발을 사겠습니다.')
}

const capPrice = 50000
if (capPrice < 50000) {
	console.log('모자를 사지 않겠습니다.') 	// 모자 가격이 50000원보다 작지 않으므로 해당 코드가 실행되지 않음
}

 

 

 

const shoesPrice = 50000
if (shoesPrice < 40000) {
	console.log('신발을 사겠습니다.')
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.') 	// 신발 가격이 40000원보다 작지 않으므로 해당 코드가 실행됨
}

 

 

const shoesPrice = 50000
if (shoesPrice < 40000) {
	console.log('신발을 사겠습니다.')
} else if (shoesPrice <= 50000) {
	console.log('고민을 해볼게요...') 	// 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}

 

 

# 반복문

 

 

let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
temperature++ 	// 증감연산자를 활용해서 온도를 변화시킵니다.
}

실수로 무한루프에 빠져서 프로그램의 실행이 끝나지 않는다면 ctrl + c 를 눌러서 중단시킵니다.

 

 

 

for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}

 

 

1. temperature라는 변수를 선언하고 값을 할당합니다. (begin)

2. temperature가 25보다 작은지 연산합니다. 결과값이 true라면 계속 실행. false라면 for 문 종료
(condition)
3. 중괄호 안의 코드가 실행됩니다.
4. temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복합니다. (step)

 

 

 

for (let number = 1; number <= 10; number++) {
    if (number % 3 === 0) {
        console.log(`${number}는 3으로 나눠서 떨어지는 숫자입니다.`)
    }
}

for (let number = 1; number <= 20; number++) {
    if (number % 2 === 0) {
    	console.log(`숫자 ${number}는 짝수입니다.`)
    } else {
    	console.log(`숫자 ${number}는 홀수입니다.`)
    }
}

 

 

# 함수

 

 

const priceA = 1000
const priceB = 2000
// 두 상품가격의 합과 평균을 구해서 출력해야 하는 코드 작성

const sum1 = priceA + priceB
console.log(`두 상품의 합계는 ${sum1}입니다.`)

const avg1 = sum1 / 2
console.log(`두 상품의 평균은 ${avg1}입니다.`)

const priceC = 3000
const priceD = 4000[스파르타코딩클럽] 자바스크립트 문법 뽀개기 14
// 이번에도 두 상품가격의 평균을 구해서 출력해야 한다면? 위와 동일한 코드를 또 작성...

const sum2 = priceC + priceD
console.log(`두 상품의 합계는 ${sum2}입니다.`)

const avg2 = sum2 / 2
console.log(`두 상품의 평균은 ${avg2}입니다.`)
// 한두번은 괜찮은데 이렇게 수십, 수백번씩 평균을 구하고 출력해야 한다면?

 

 

 

// 함수의 선언
function calculateAvg(price1, price2) {
    const sum = price1 + price2 	// 매개변수인 price1, price2을 변수처럼 활용!
    console.log(`두 상품의 합계는 ${sum}입니다.`)
    const avg = sum / 2
    return avg 		// 평균가격을 리턴!
}

 

 

const priceA = 1000
const priceB = 2000
// 함수의 호출

const avg1 = calculateAvg(priceA, priceB)
console.log(`두 상품의 평균은 ${avg1}입니다.`)

const priceC = 3000
const priceD = 4000
// 함수의 호출

const avg2 = calculateAvg(priceC, priceD)
console.log(`두 상품의 평균은 ${avg2}입니다.`)

 

 

 

 

# 클래스와 객체

 

 

// 노트북1을 것을 표현하기 위한 데이터들
// 변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음

const notebook1Name = 'Macbook'
const notebook1Price = 2000000
const notebook1Company = 'Apple'

// 이름, 가격, 제조사와 같은 정보를 다 담을 수 있는 좀 더 큰 범위의 데이터 타입이 있으면 좋지 않을까?

 

 

 

 

class Notebook {
    constructor(name, price, company) {
        this.name = name
        this.price = price
        this.company = company
    }
}

 

 

 

 

const notebook1 = new Notebook('MacBook', 2000000, 'Apple')

 

 

console.log(notebook) 		// Notebook { name: 'Macbook', price: 2000000, company: 'Apple' }
console.log(notebook.name) 	// MacBook
consoel.log(notebook.price) 	// 2000000
console.log(notebokk.company) 	// Apple

 

 

 

// 클래스 선언
class Product {
    constructor(name, price) {
        this.name = name
        this.price = price
	}

    printInfo() {
        console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
    }
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() 	// 상품명: Apple Macbook, 가격: 2000000원

 

 

 

const computer = {
    name: 'Apple Macbook',
    price: 20000,
    printInfo: function () {
    	console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
    }
}

computer.printInfo()

 

 

 

# 배열

 

 

 

 

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]

 

 

 

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors[0]) 	// o번 인덱스를 통해서 데이터에 접근. red
console.log(rainbowColors[1]) 	// 1번 인덱스를 통해서 데이터에 접근. orage
console.log(rainbowColors[2]) 	// 2번 인덱스를 통해서 데이터에 접근. yellow
console.log(rainbowColors[3]) 	// 3번 인덱스를 통해서 데이터에 접근. green
console.log(rainbowColors[4]) 	// 4번 인덱스를 통해서 데이터에 접근. blue
console.log(rainbowColors[5]) 	// 5번 인덱스를 통해서 데이터에 접근. indigo
console.log(rainbowColors[6]) 	// 6번 인덱스를 통해서 데이터에 접근. violet

 

 

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

console.log(rainbowColors.length) 	// 7을 출력
console.log(rainbowColors[rainbowColors.length - 1]) 	// length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!

 

 

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

rainbowColors.push('ultraviolet') 	// 배열의 마지막에 ultarviolet 추가
console.log(rainbowColors) 		// ultraviolet이 추가된 rainbowColors 출력
rainbowColors.pop() 			// 배열의 마지막 요소 ultraviolet을 제거
console.log(rainbowColors) 		// ultraviolet이 제거된 rainbowColors 출력

 

 

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (let i = 0; i < rainbowColors.length; i++) {
	console.log(rainbowColors[i])
}

 

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (const color of rainbowColors) {
	console.log(color)
}

 

const priceList = [1000, 2000, 5000, 7000, 10000, 9000, 3000, 15000, 20000, 17000]

let sum = 0

for (const price of priceList) {
	sum += price
}

const avg = sum / priceList.length

console.log(`합계: ${sum}, 평균: ${avg}`)

 

 

# 느낀점

항상 대표님의 강의를 듣다 새로운 선생님의 강의를 들었는데 차분하게 설명도 잘해주시고

기본적인 문법을 배우는데 도움이 많이 될 영상 같았다

나 또한 이미 배운 내용이였지만 주력으로 사용한 언어가 아니다 보니

문법이 어색하긴했고 이번 기회에 문법을 정리하며 확실히 알 수 있는 계기가 된거같아 좋았다

내일은 자바 문법 뽀개기를 들을 예정이고 노션 포트폴리오 만드는 책을 읽으면서 노션을 만들어볼 생각이다

그리고 부스트코스의 cs강의가 생각보다 길어서 매일 한챕터씩이라도 들어서 완강을 해 볼 생각이다