for...of와 entries — 반복문의 현대적 패턴

이 토픽을 마치면

for...of, for...in, forEach의 차이를 이해하고, 상황에 맞는 반복문을 선택할 수 있게 됩니다.

for...in은 배열에 쓰지 마세요

javascript

const fruits = ["apple", "banana", "cherry"];

for (const i in fruits) {
  console.log(i); // "0", "1", "2" — 인덱스가 문자열
}

for...in은 객체의 키를 순회합니다. 배열에 쓰면 인덱스를 문자열로 반환합니다. 프로토타입 체인의 속성까지 순회할 수 있어서 예상치 못한 결과가 나올 수 있습니다.

for...of는 값을 순회합니다

javascript

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit); // "apple", "banana", "cherry"
}

for...of는 **이터러블(iterable)**의 값을 직접 순회합니다. 배열, 문자열, Map, Set 등에서 쓸 수 있습니다.

javascript

for (const char of "hello") {
  console.log(char); // "h", "e", "l", "l", "o"
}

인덱스가 필요하면 entries()

for...of는 값만 줍니다. 인덱스가 필요하면 entries()를 씁니다:

javascript

const fruits = ["apple", "banana", "cherry"];

for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}
// 0: apple
// 1: banana
// 2: cherry

구조 분해로 인덱스와 값을 동시에 받습니다. Python의 enumerate()와 같은 역할입니다.

forEach vs for...of

javascript

// forEach
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

// for...of
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}

둘 다 비슷해 보이지만 중요한 차이가 있습니다:

forEach는 중간에 멈출 수 없습니다. break와 return이 전체 루프를 끊지 못합니다 (return은 현재 콜백만 종료합니다).

javascript

// for...of — break 가능
for (const fruit of fruits) {
  if (fruit === "banana") break;
  console.log(fruit); // "apple"만 출력
}

// forEach — break 불가
fruits.forEach(fruit => {
  if (fruit === "banana") return; // 이 콜백만 건너뜀
  console.log(fruit); // "apple", "cherry" 출력
});

중간에 멈춰야 하면 for...of, 전체를 순회하면 forEach나 map.

객체 순회

일반 객체는 for...of로 직접 순회할 수 없습니다. Object.entries()를 씁니다:

javascript

const user = { name: "Alice", age: 25, city: "Seoul" };

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Alice
// age: 25
// city: Seoul

Object.keys()는 키만, Object.values()는 값만 반환합니다.

핵심

for...in은 객체의 키를, for...of는 이터러블의 값을 순회합니다. 배열에서 인덱스가 필요하면 entries()를 쓰세요. 중간에 break가 필요하면 for...of, 전체 순회면 forEach가 적합합니다.