[JS] For in vs For of

[devSoyoung]

For ... in

• 객체의 속성에 대한 반복 작업을 수행할 때 사용
• 모든 객체에서 사용 가능
• 객체의 Key에 접근할 수 있지만, 속성에 접근할 방법은 없음

const arr = [1, 2, 3, 4, 5];
for (idx in arr) {
  console.log(`key: ${idx}, value: ${arr[idx]}`);
}
// idx에는 배열의 인덱스 값, value에는 각 위치에 대응하는 값이 들어감

const obj = { a: 1, b: 2, c: 4 };
for (let key in obj) {
  console.log(`key: ${key}, value: ${obj[idx]}`);
}
// key에는 a, b, c, value에는 각 키에 대응하는 값이 들어감

For ... of

• ECMAScript 6에서 추가된 컬렉션 전용 반복 구문
• 컬렉션이 Symbol.iterator 프로퍼티를 가지고 있어야 함

  const arr = [1, 2, 3, 4, 5];
  for (let item of arr) {
  console.log(item);
  }

자바스크립트 컬렉션의 Iterator

• 자바스크립트 컬렉션 : Array, Set, Map
  • entries() : 값이 키-쌍인 iterator를 반환 (키, 값 모두 접근)
  • values() : 값이 컬렉션의 value인 iterator를 반환 (키에만 접근)
  • keys() : 값이 컬렉션에 포함된 key인 iterator를 반환 (값에만 접근)
• 위 세 가지 모두 For .. of의 of 뒤에 올 수 있음
• 컬렉션의 Iterator를 명시하지 않고 of 뒤에 컬렉션만 오는 경우 Default Iterator 사용
  • Array : values()
  • Set : values()
  • Map : entries()