이터레이션 프로토콜

Es6 이전의 순회 가능한 데이터 컬렉션, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의 구조를 가지고 for, for...in, forEach등 다양한 방법으로 순회할 수 있었다.

ES6에서는 이터러블로 통일하여 for...of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했다.

• 이터러블 프로토콜

  • 이터러블 프로콜을 준수한 객체를 이터러블이라 한다. 이터러블은 for ... of문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.

• 이터레이터 프로토콜

  • 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다. 이러한 규약을 이터레이터 프로토콜이라 하며, 이터레이터 프로토콜을 준수한 객체를 이터레이터라 한다. 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다.

이터러블

const array = [1,2,3];

for (cont item of array) {
  console.log(item);
}

// 이터러블은 스프레드 가능
console.log([...array]); // [1,2,3]

// 이터러블은 배열 디스트럭처링 할당의 대상
const [a, ...rest] = array;
console.log(a, rest); // 1, [2,3]

이터레이터

const array = [1,2,3];

// Symbol.iterator 메서드는 이터레이터 반환. 이터레이터는 next 메서드를 갖는다.
const iterator = array[Symbol.iterator]();

// next 메서드를 호출하면 이터러블을 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체 반환
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}

for ... of 문

프로토타입 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거

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

이터러블과 유사 배열 객체

유사 배열객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회할 수 있고, 인덱스 접근이 가능하다. 하지만 이터러블이 아닌 일반 객체이기 때문에 for ... of 문으로 순회 불가능. arguments는 유사 배열 객체이면서 이터러블이다.