[자바스크립트 javascript] 공부 - 자바스크립트 문법 뽀개기

✅ 시작하기 전

 

1️⃣ 프로그래밍이란?

 

프로그래머들이 "어떤 도구"를 이용해 컴퓨터가 작동시킬 수 있는 프로그램을 만들었고, 우리는 마우스 클릭이나 키보드 입력과 같은 익숙한 방식으로 사용하는 것.

ex )  엑셀, 노션, 쿠팡 스마트폰 앱 쇼핑

 

 

👌 프로그램이 하는 일 : 데이터의 입력 => 처리 => 출력

 

- 입력 : 마우스를 클릭하거나 키보드로 타이핑을 한다는 것(데이터 입력)

ex) 쇼핑몰에서 우리가 상품을 고르고 배송지와 결제 카드번호 등을 입력하는 것

 

- 처리 : 최종 구매를 하겠다는 버튼을 누르면, 그 정보들은 어딘가에 저장이 된다.

 

- 출력 : 최종 결제 금액은 얼마인지, 언제 어떤 물건을 구매했는지 기록이 남을거고 배송이 진행 되면서 배송 현황도 계속해서 업데이트가 된다. 그리고 이러한 모든 기록과 실시간 업데이트 상황이 화면에 "출력" 되어서 우리가 쉽게 확인을 할 수 있다.

 

 

2️⃣ 자바스크립트란?

 

프로그래밍이란, 프로그래머들이 "어떤 도구"를 이용해 코딩을 하는 것, 이 때 이용하는 도구가 바로 프로그래밍 언어, 프로그래밍 언어도 정해진 문법이 있다. 이 문법에 따라 코딩을 하면 컴퓨터는 이를 해석해 우리가 원하는대로 데이터를 입력받아 처리하고 출력해줄 수 있다. 자바스크립트는 이러한 언어들 중에서 많이 쓰이는 언어

 

👌 Node.js 란?

 

자바스크립트 언어의 문법에 맞게 코딩을 했을 때, 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용 번역기. 

 

 

✅ 변수

 

변수란, 보통 프로그래밍 세계, 그리고 자바스크립트에서는 값(데이터)을 저장해놓고 사용하기 위해 변수라는 것을 사용한다. 저장해놓은 것을 가리키는 일종의 '이름표'

자바스크립트에서 변수를 선언할 때는, let 이라는 키워드를 사용한다.

 

👌 let 변수이름 = 값

 

// 우리는 이걸 보통 "변수 <변수이름> 를 선언했고 해당 변수에 <값>을 할당했다"고 이야기한다.

 

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

 

👌 const 변수이름 = 값

 

const는 let 과 달리 변수에 값을 재할당할 필요가 없을 때 쓴다. 해당 변수가 "고정된 값"을 계속 가지고 있을 때 쓰면 좋다.

 

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

 

👌 var 변수이름 = 값

let, const 가 있기 전에는 실제로 var를 써서 변수를 선언해야만 했다.

하지만 최근 자바스크립트에서는 let 과 const를 쓰는 것이 맞다. var는 여러 단점들이 있기 때문에 더 이상 사용하지 않는 것이 좋다.

 

 

✅ 데이터 타입

 

🔹 기본, 원시형 타입 : number, string, boolean, null, undefined

프로그래밍은 수많은 데이터를 입력 => 처리 => 출력하는 과정을 컴퓨터가 알아들을 수 있는 언어로 서술하는 것, 이러한 데이터들을 컴퓨터가 보다 빠르고 효율적으로 처리하기 위해 자바스크립트라는 프로그래밍 언어가 구분해놓은 것이라고 생각하면 된다.

 

👌 숫자(Number)

나이, 거리, 무게, 가격 등 무수히 많은 종류의 데이터를 숫자로 표현할 수 있다.

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

 

👌 문자열(String)

문자열 데이터는 이중 따옴표("")나 작은 따옴표('')로 데이터를 감싸야 한다.

이름, 브랜드명, 제품명 등등

 

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

 

👌 Boolean

자바스크립트에서 참, 거짓을 나타내는 true / false를 표현하는 데이터

비교 연산자에서 많이 활용한다.

 

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

 

👌 null, undefined

null : 텅텅 비어 있는 값

undefined : 변수를 선언만 하고 값이 할당되어 있지 않은 것

 

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

 

자바스크립트에는 기본 타입 이외에 객체형 타입이라는 데이터도 존재, 2주차 강의에서 배운다고 한다!

 

 

✅ 연산자

 

1️⃣ 문자열 붙이기

 

👌 + 사용해서 문자열 이어붙이기

 

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

 

'1'은 문자열이지만, '1' + 2 , 즉 문자열과 숫라를 이어붙이면 숫자가 문자로 인식된다.

 

 

👌 템플릿 리터럴(Template literals)

 

백틱(``)을 사용하여 문자열 데이터를 표현할 수 있다. 이중 따옴표나 작은 따옴표로 문자열을 표현할 때보다 간결하게 문자열 붙이기가 가능하다.

 

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

 

2️⃣ 산술연산자(Numeric operators)

 

숫자 데이터에 대한 여러 연산들이 가능하다.

 

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을 출력

 

3️⃣ 증감연산자(Increment and Decrement operators)

 

자기 자신의 값을 증가시키거나, 감소시키는 연산자(++, --)라고 생각하면 좋다. 

 

👌 증감연산자를 변수 앞에 놓는 경우

 

let count = 1 const preIncrement = ++count // 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다. // 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다. // count = count + 1 // const preIncrement = count console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

 

👌 증감연산자를 변수 뒤에 놓는 경우

 

let count = 1 const postIncrement = count++ // 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다. // postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다.  // const postIncrement = count // count = count + 1 console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1

 

count의 값을 계속 증가시키고, count에 할당하고 있기 때문에 const를 사용하면 에러가 발생하여 let 구문으로 선언하고 있다.

 

4️⃣ 대입연산자(Assignment operators)

 

어떤 값을 어떤 변수에 할당한다는 표현, 그게 바로 대입연산자를 사용한다는 의미

 

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)

 

 

5️⃣ 비교연산자(Comparison operators)

 

말 그대로 숫자값을 비교하는 연산자, 그리고 이러한 비교연산자를 통해서 얻는 값이 바로 boolean!

조건문과 같이 많이 활용된다.

 

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

 

 

6️⃣ 논리연산자(Logical operators)

 

👌 ||(or) : 연산 대상 중 하나만 true여도 true 리턴

 

👌 &&(and) : 연산 대상이 모두 true 여야만 true 리턴

 

👌 !(not) : true를 false로, false를 true로 바꿔서 리턴

 

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

 

 

7️⃣ 일치연산자(Equality operators)

 

👌 === : 두 값이 일치하는지를 비교한다. 엄격한(strict) 일치연산자여서 비교하는 두 값의 데이터 타입과 값 자체가 정확히 일치해야만 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를 출력

 

 

✅ 조건문

 

1️⃣ if

 

if 구문을 활용해 조건이 만족했을 때만 코드를 실행하도록 할 수 있고 이 조건의 결과값이 Boolean이다.

Boolean을 리턴하는 연산자 : 비교연산자, 논리연산자, 일치연산자

 

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

 

2️⃣ else

 

if 구문의 조건을 만족하지 않았을 때 실행하고 싶은 코드를 else와 함께 작성한다.

 

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

 

3️⃣ else if

 

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

 

 

✅ 반복문

 

1️⃣ while

 

반복문을 활용해서 특정 코드를 반복해 실행할 수 있다.

이 때, 조건을 설정해서 우리가 원하는 만큼만 반복할 수 있도록 해야한다.

 

👌 while(조건)(조건을 만족할 때 실행할 코드)

 

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

 

🔹 주의할 것

 

반복문의 조건에 포함된 변수의 값을 계속 변화시켜줘서, 언젠가는 반복문이 끝날 수 있도록 해줘야 한다는 것.

위의 코드에서 보면 온도를 1도씩 계속 올려서, 반복문의 조건이 언젠가는 false를 리턴하고 바디의 코드가 실행되지 않는다. 반복문의 조건이 계속해서 true를 리턴한다면 무한 루프에 빠져서 프로그램이 끝나지 않는다!!

 

 

예를 들어, temperature++ 이 부분을 주석처리 해버리면

 

 

위 사진처럼 기존 조건인 20도에서 무한 루프를 해버린다.

 

👌 ctrl + c : 실수로 무한 루프에 빠져서 프로그램의 실행이 끝나지 않는다면 중단시켜야 한다.

 

2️⃣ for

 

while과 같은 반복문으로, 좀 더 명시적으로 반복문의 조건을 표현할 수 있다.

 

 

👌 for (begin; condition; step) (조건을 만족할 때 실행할 코드)

 

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

 

👌 for문이 실행되는 순서

 

1. begin : temperature라는 변수를 선언하고 값을 할당한다.

2. condition : temperature가 25보다 작은지 연산한다. 결과값이 true라면 계속 실행, false라면 for문 종료

3. 중괄호 안의 코드가 실행된다.

4. step : temperature에 1을 더해서 재할당하고 2번 과정부터 다시 반복된다.

 

 

✅ 반복문과 조건문 활용

 

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

 

 

✅ 함수

 

1️⃣ 함수의 선언

 

변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을 하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해준다.

 

function 함수명(매개변수들...) { 이 함수에서 실행할 코드들 return 반환값 }

 

함수명은, 함수가 하는 일들을 대표할 수 있는 이름이면 좋다.

 

매개변수(parameter)는 해당 함수의 바디에 있는 코드에서 사용할 수 있는 일종의 변수이고, 함수 호출시 전달하게 된다. 함수를 실행하기 위해서 필요한 일종의 input 이라고 생각하면 된다.

중괄호 안에는 이 함수가 해야할 일들을 코드로 쭉 작성하고, 반환해야 할 값을 명시해준다.

 

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

 

 

2️⃣ 함수의 호출

 

실제 이 함수를 사용하기 위해서는 호출을 해야 한다.

 

const 변수명 = 선언한 함수명(매개변수들)

 

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. 함수 calculateAvg를 호출하면서 변수 priceA와 priceB를 매개변수로 전달

2. 함수 calculateAvg의 바디 코드가 실행된다. 이 때, 1번에서 전달한 매개변수의 값이 함수를 선언할 때 썼던 매개변수명인 price1, price2에 할당되었다고 보면 된다.

3. 함수의 바디 코드가 최종적으로 변수 avg를 리턴하고 있고 이것이 변수 avg1에 할당된다.

 

 

✅ 클래스와 객체

 

1️⃣ 객체 타입

 

// 노트북1을 것을 표현하기 위한 데이터들 // 변수명을 명시적으로 하는 것 이외에는 이 데이터들의 관계를 표현해줄 수 있는 방법이 없음 const notebook1Name = 'Macbook' const notebook1Price = 2000000 const notebook1Company = 'Apple' // 이름, 가격, 제조사와 같은 정보를 다 담을 수 있는 좀 더 큰 범위의 데이터 타입이 있으면 좋지 않을까?

 

이 때 사용하는 데이터 타입이 바로 객체 타입이다.

객체를 좀 어렵게 이야기 하면 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 자신의 속성을 가지고 있고 다른 것과 식별가능한 것'을 의미한다.

 

위의 예시 코드를 통해 다시 생각해보면 노트북1은 이름, 가격, 제조사라는 자신만의 속성을 가지고 있고 다른 노트북과 식별 가능한 것이기 때문에 객체로 나타낼 수 있다.

 

2️⃣ 클래스 선언

 

객체를 만들 때 마치 설계도처럼 사용하는 것이 클래스이다.

그래서 흔히 클래스는 템플릿이고 객체는 이를 구체화한 것이라고 한다. 클래스를 미리 정의해놓으면 함수처럼 필요할 때마다 그 클래스를 사용해서 동일한 모양을 가진 객체를 만들 수 있다.

 

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

 

1. class 키워드와 클래스명

 

class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나온다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋다.

 

2. 생성자(constructor)

 

중괄호 안에는 생성자라는 것을 적어준다. 말 그대로 나중에 객체가 '생성'될 때, 자바스크립트 내부에서 호출이 되는 함수라고 생각해주면 된다.

 

3. this와 속성(property)

 

생성자의 바디를 보면 this 라는 키워드가 등장한다. 이 this는 클래스를 사용해 만들어 질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성이다.

생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, company를 객체의 속성 name, price, company에 각각 할당하고 있는 것이다.

 

 

3️⃣ 메소드(method)

 

클래스에는 데이터(값)을 나타내는 속성 뿐만 아니라, 함수와 같이 특정 코드를 실행할 수 있는 메소드도 정의할 수 있다. 객체를 생성한 후, 만들어진 객체의 메소드를 호출하면 된다.

 

// 클래스 선언 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원

 

4️⃣ 객체 리터럴(Object Literal)

 

자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다. 객체 리터럴은 클래스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이라고 생각하면 된다.

2개 이상의 속성과 메소드가 있을 때에는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는 것이 좋다.

 

const 변수명 = {

속성명: 데이터,

메소드명: function () { 메소드 호출시 실행할 코드들 }

}

 

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

* 객체 리터럴에서는 메소드와 달리 {} 안에 name을 name 이라고 직접적으로 쓰지만, console.log 해줄때에는 똑같이 this.name으로 가지고 와야 한다.

 

결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다. 굳이 복잡하게 클래스를 정의하는 이유는, 재사용성 때문이다. 한번 클래스를 만들어두면 같은 속성과 메소드를 가지고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.

 

 

✅ 배열

 

1️⃣ 배열이란?

 

같은 형식의 많은 데이터를 순서대로 저장하고자 할 때는 데이터의 수만큼 변수들을 선언해줄 수 밖에 없다. 이 때 쓰는 것이 바로 배열

 

 

2️⃣ 배열의 선언

 

숫자 1,2,3,4,5로 이루어진 배열을 선언하는 방법

 

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

첫 번째 방법은 앞서 클래스를 활용해 객체를 만들어주었던 것과 같다. 클래스를 선언해준 적은 없으나, 자바스크립트 내부적으로 이미 가지고 있는 것이다.

 

두 번째 방법은 배열을 바로 만드는 것, 가장 많이 사용된다.

 

 

3️⃣ 배열 안의 데이터

 

요소(element) : 배열에 있는 각각의 데이터

인덱스(index) : 객체의 속성명, 인덱스는 0부터 시작한다.

 

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

 

 

4️⃣ 배열의 길이 : length 사용

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] console.log(rainbowColors.length) // 7을 출력 console.log(rainbowColors[rainbowColors.length - 1]) // length 를 응용하여 배열의 마지막 요소도 쉽게 찾아서 출력 가능!

 

 

5️⃣ 요소 추가와 삭제

 

 

👌 추가 : push

👌 삭제 : pop

 

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 출력

 

6️⃣ 배열과 반복문

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] for (let i = 0; i < rainbowColors.length; i++) { console.log(rainbowColors[i]) }

 

1. 배열의 인덱스는 0부터 시작하므로 변수 i의 시작값도 0으로

2. i가 배열의 길이보다 작을 때에만 반복문 안의 코드 실행

3. 모든 요소를 빠짐없이 다 출력해야 하므로 i는 1씩 증가

 

 

👌 배열과 함께 조금 더 자주 쓰이는 간단한 형식의 for문

 

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] for (const color of rainbowColors) { console.log(color) }

 

배열에서 요소들을 차례대로 하나씩 찾아 color라는 변수에 할당한다. 자동으로 배열의 끝까지 반복문이 실행되기 때문에 첫 번째 for문보다 쓰기 편하다.