[자바스크립트(JavaScript)] for .. of vs for .. in

파이썬을 먼저 배운 나에게는 for ... in 이 훨씬 익숙하다.

그런데 자바스크립트에서는 일반적으로 for .. in을 거의 사용하지 않고 for .. of를 더 많이 사용한다고 해서 두 문법을 비교해보았다.

---

// for .. of

- Iterable 객체(Array, String, Map, Set 등)의 값들을 순회한다.

- 배열의 요소들을 순회할 때 특히 자주 사용한다.

const animals = ['rabbit', 'tiger', 'lion'];

for (const animal of animals) {
  console.log(animal);
}

// === 결과 ===
// rabbit
// tiger
// lion

---

// for .. in

- 객체의 모든 속성을 순회한다.

- 객체의 키를 순회할 때 주로 사용한다.

const testScores = {
  a: 80,
  b: 70,
  c: 100
};

for (let person in testScores) {
  console.log(`${person} scored ${testScores[person]}`);
}

// === 결과 ===
// a score 80
// b score 70
// c score 100

---

※ 정리

객체의 키와 값에 접근할 때는 for .. in 을,

배열이나 다른 iterable 객체의 요소에 접근할 때는 for .. of 를 사용한다.

★ 배열에 접근할 때는 배열의 인덱스 외에도 추가적인 속성까지 접근할 수 있으므로 for .. in을 사용하지 않는 것이 좋다.