34장 이터러블

34.1. 이터레이션 프로토콜

• 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에서 정의해 미리 약속한 규칙
• ES6 이전 -> 통일된 규약 없이 for문, for...in문, forEach 메서드 등 다양한 방법으로 순회
• ES6 이후 -> 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for...of문, 스프레드 문법, 배열 디스트럭처링 할당 대상으로 사용

이터러블

• 이터러블 프로토콜을 준수한 객체로 순회 가능한 자료 구조
• Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 상속받은 것을 호출하면 이터레이터를 반환한다.

이터레이터

• 이터레이터 프로토콜을 준수한 객체로 이터러블 요소를 탐색하기 위한 포인터
• next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 갖는 이터레이터 객체를 반환한다.

34.1.1 이터러블

const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function';

isIterable([]);    // true : 배열
isIterable('');    // true : 문자열
isIterable(new Map());    // true : 맵
isIterable(new Set());    // true : Set
isIterable({});    // false : 객체는 이터러블 x

const arr = [1, 2, 3];

// 배열은 이터러블 -> Symbol.iterator 메서드 상속
console.log(Symbol.iterator in arr);    // true

// for...of 순회
for (const item of arr) {
  console.log(item);    
}

// 스프레드 문법 사용
console.log([...arr]);  // [ 1, 2, 3 ]

// 배열 디스트럭처링 할당
const [a, ...rest] = arr;
console.log(a, rest);   // 1, [ 2, 3 ]

const obj = { a: 1, b: 2 };

// 일반 객체는 이터러블 x
console.log(Symbol.iterator in obj);    // false

// for...of 순회 불가
for (const item of arr) {
  console.log(item);  // TypeError: obj is not iterable
}

// 배열 디스트럭처링 할당 불가
const [a, b] = obj;   // TypeError: obj is not iterable

// 단, 스프레드 프로퍼티 제안(Stage 4)은 객체 스프레드 문법 허용
console.log({...obj});

34.1.2 이터레이터

const arr = [1, 2, 3];

// Symbol.iterator 메서드는 이터레이터 반환
const iterator = arr[Symbol.iterator]();

// next 메서드 가짐
console.log('next' in iterator);  // true
console.log(iterator.next());  // { value: 1, done: false }
console.log(iterator.next());  // { value: 2, done: false }
console.log(iterator.next());  // { value: 3, done: false }
console.log(iterator.next());  // { value: undefined, done: true }

34.2 빌트인 이터러블

• Array
• String
• Map
• Set
• TypedArray
• arguments
• DOM 컬렉션(NodeList, HTMLCollection)

34.3 for...of 문

34.4 이터러블과 유사 배열 객체

34.5 이터레이션 프로토콜의 필요성

34.6 사용자 정의 이터러블