enumerable / iterable

for in 과 for of 의 차이를 리마인드 해보면서 찾아본 것을 정리해보자.

iterator메서드를 가지고 있는 애들은 next가 적용이 될 수 있는 애들이어야 하기 때문에 순서가 보장되는 애들인 것. -> for of


객체는 순서가 보장되지 않기 때문에 iterator의 next가 적용될 수 없고 열거 가능한 속성들이 있으니까 이뉴머러블 -> for in

for of 는 [] / 반복 가능 / 아이템
for in 은 {} / 열거 가능 / 속성 이름

-> 속성 이름? key? value도 가져올 수 있지 않나 싶었는데 주로 값 가져올 때 obj[key] 로 가져오다 보니 이렇게 생각해도 될 것 같다.

이터러블 (Iterable)

이터러블 객체는 Symbol.iterator 메서드를 구현하여 이터레이터를 반환하는 객체를 의미합니다. 이터러블 객체는 for...of 문을 사용하여 반복할 수 있습니다. 이터러블 객체는 내부적으로 값을 하나씩 반환할 수 있는 메커니즘을 갖추고 있습니다.

• 예시: 배열, 문자열, Set, Map, arguments 객체 등.

const array = [1, 2, 3];
for (const value of array) {
  console.log(value);  // 1, 2, 3
}

이뉴머러블 (Enumerable)

이뉴머러블 객체는 객체의 열거 가능한 속성을 가지는 객체를 의미합니다. 속성의 열거는 for...in 문을 사용하여 수행합니다. 기본적으로 모든 객체의 속성은 열거 가능하며, 프로토타입 체인에 있는 속성도 포함될 수 있습니다.

• 예시: 일반 객체, 배열(인덱스 기반으로), 클래스 인스턴스 등.

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key);  // 'a', 'b'
}

이터러블과 이뉴머러블의 관계

• 이터러블 객체는 Symbol.iterator 메서드를 구현하고 있으며, for...of 문을 통해 반복할 수 있습니다. 모든 이터러블 객체는 열거 가능한 속성을 가지지만, 이뉴머러블 객체와는 약간의 차이가 있습니다.
• 이뉴머러블 객체는 객체의 열거 가능한 속성을 가리키며, for...in 문으로 순회할 수 있습니다. 모든 이뉴머러블 객체가 이터러블인 것은 아닙니다.

예시

1. 이터러블이면서 이뉴머러블인 객체:

   • 배열: 배열은 이터러블이며, 인덱스 기반으로 열거 가능한 속성도 가집니다.

   const array = [10, 20, 30];
   for (const value of array) {
     console.log(value);  // 10, 20, 30
   }
   
   for (const index in array) {
     console.log(index);  // '0', '1', '2'
   }

2. 이터러블이지만 이뉴머러블이 아닌 객체:

   • Set: Set은 이터러블이며, for...of 문으로 순회할 수 있지만, 속성의 개념이 없으므로 for...in 문으로는 순회할 수 없습니다.

   const set = new Set([1, 2, 3]);
   for (const value of set) {
     console.log(value);  // 1, 2, 3
   }

3. 이뉴머러블이지만 이터러블이 아닌 객체:

   • 일반 객체: 일반 객체는 열거 가능한 속성을 가지며 for...in 문으로 속성을 순회할 수 있지만, Symbol.iterator를 구현하지 않아서 for...of 문으로는 순회할 수 없습니다.

   const obj = { a: 1, b: 2 };
   for (const key in obj) {
     console.log(key);  // 'a', 'b'
   }

요약

• 모든 이터러블 객체는 이뉴머러블입니다: 이터러블 객체는 값을 반복 가능하므로 내부적으로 열거 가능한 속성(반복)을 지원합니다.
• 모든 이뉴머러블 객체가 이터러블은 아닙니다: 객체는 속성을 열거할 수 있지만, 반복 가능한 값을 제공하지 않으므로 Symbol.iterator를 구현하지 않습니다.

이러한 개념을 이해하면 자바스크립트에서 반복과 속성 순회를 더 잘 활용할 수 있습니다.