[JS 핵심 가이드] 07. 루프

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

 

이전 글: [JS 핵심 가이드] 06. 디스트럭처링(Destrcturing)

[JS 핵심 가이드] 06. 디스트럭처링(Destrcturing)

 

---

1. for of 루프

: 배열의 각 원소에 대해 반복하는 방법

const fruits = ['apple', 'banana', 'orange']
for(const fruit of fruits) {
	console.log(fruit);
}
//apple
//banana
//orange

 

2. 객체에 대한 반복

: 객체는 interable이 아님

Q. 키/값 쌍에 대한 반복은 어떻게 구현? 

A. Object.keys()를 사용하여 객체의 모든 키를 가져온 후, 키에 대해 반복을 수행하면서 값에 접근

const car = {
	maker: "BMW",
    color: "red",
    year: "2021",
};

for(const prop of Object.keys(car)) {
	const value = car[props]
    console.log(props, value)
}

// maker: BMW
// color: red
// year: 2021

=> ES6에서 Object.entries()로 객체의 key, value를 모두 가져올 수 있음. 

 

 

3. for in 루프

: 순서없이 객체의 모든 열거 가능한 속성을 반복

const car = {
	maker: "BMW",
    color: "red",
    year: "2021",
};

for(const prop in car) {
    console.log(props, car[props])
}

//maker BMW
//color red
//year 2021

 

4. for of와 for in의 차이

let list = [4, 5, 6]

// for...in은 키의 목록을 반환한다.
for(let i in list) {
	console.log(i); //"0", "1", "2"
}

//for ...of는 값을 반환한다.
for(let i of list) {
	console.log(i); // 4, 5, 6
}