Chapter 07: 반복문 (Loop)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다.

7.1 for (value of iterable)

---

for...of 문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문이다. 따라서 이터러블 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에만 사용 가능하다.

사실 이 구문은 배워놔도 사용 할 일이 별로 없다. 보통 배열을 반복할 때에는 map 등의 배열 내장 함수를 많이 사용하기 때문이다.

기본 문법

const array = [1, 2, 4, 5];
for (let value of array) { // use strict 환경이 아닌 경우 let을 빼도 됨
    console.log(value);
}
// 1
// 2
// 4
// 5

배열에 대한 반복

// for
var fruits = ['apple','banana','orange'];
for (var i = 0; i < fruits.length; i++){
  console.log(fruits[i]);
}
// apple
// banana
// orange

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

객체에 대한 반복

객체 반복문을 알아보기 전에, 객체의 정보를 배열 형태로 받아올 수 있는 함수를 알아보자.

• Object.entries: [[키, 값], [키, 값]] 형태의 배열로 변환
• Object.keys: [키, 키, 키] 형태의 배열로 변환
• Object.values: [값, 값, 값] 형태의 배열로 변환

const doggy = {
  name: '멍멍이',
  sound: '멍멍',
  age: 2
};

console.log(Object.entries(doggy));
console.log(Object.keys(doggy));
console.log(Object.values(doggy));

이제 반복문을 살펴보자. 객체는 이터러블이 아니기 때문에 객체의 key, value 쌍에 대한 반복은 다음과 같이 처리할 수 있다.

Object.keys() 이용

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

for (const prop of Object.keys(car)){
  const value = car[prop];
  console.log(prop,value);
}
// maker BMW
// color red
// year 2010

Object.entries() 이용

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

for (const prop of Object.entries(car)){
  const value = car[prop];
  console.log(prop,value);
}
// ['maker', 'BMW'] 
// ['color', 'red'] 
// ['year', '2010']

7.2 for (key in obj)

---

for...in 문은 객체를 위한 반복문이다.

기본 문법

const obj = {
    name: 'newstar'
}
for (let key in obj) { // use strict 환경이 아닌 경우 let을 빼도 됨
    console.log(key); // name
}

for in 은 순서 없이 객체의 모든 열거 가능한 속성을 반복하기 때문에 for of 와 약간 다르다. 따라서 반복 중에는 객체의 속성을 추가, 수정, 삭제하지 않는 것이 좋다.

const car = {
  maker: "BMW",
  color: "red",
  year : "2010",
}
for (const prop in car){
  console.log(prop, car[prop]);
}
// maker BMW
// color red
// year 2010

7.3 for of와 for in의 차이

---

for in 은 배열의 속성 목록을 반환하는 반면, for of 는 배열의 원소 목록을 반환한다.

let list = [4, 5, 6];

// for...in 은 key 반환
for (let i in list) {
   console.log(i); // "0", "1", "2",
}

// for ...of 는 value 반환
for (let i of list) {
   console.log(i); // "4", "5", "6"
}

참고

---

• 반복문 - 벨로퍼트와 함께하는 모던 자바스크립트