이터러블

이터레이션 프로토콜

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.

이터러블

const array = [1, 2, 3];

// 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
console.log(Symbol.iterator in array); // true


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

console.log([...array]); // [1, 2, 3]

const [a, ...rest] = array;
console.log(a, rest); // 1, [2, 3]

• 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 말한다.

• 이터러블은 for...of로 순회할 수 있으며 스프레드 문법과 디스트럭처링 할당의 대상으로 사용할 수 있다.

이터레이터

const array = [1, 2, 3];

const iterator = array[Symbol.iterator]();

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 }

• 이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다.
• next 메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환한다.
• 이터러블 리절트 객체에는 현재 순회 중인 이터러블의 값을 나타내는 value, 이터러블의 순회 완료 여부를 나타내는 done으로 구성된다.

for...of문

for (const item of [1, 2, 3]) {
  // item 변수에 순차적으로 1, 2, 3이 할당된다.
  console.log(item); // 1 2 3
}

• for... of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.

for... in 문과 차이점

• for ... in 문은 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 [[Enumerable]] 값이 true인 프로퍼티를 순회하면서 열거한다. 프로퍼티 키가 심벌인 프로퍼티는 열거하지 않는다.

• for ... of 문은 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 리절트 객체의 value 값을 변수에 할당한다. done 값에 따라 순회를 중단한다.

이터러블과 유사 배열 객체

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

// 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회할 수 있다.
for (let i = 0; i < arrayLike.length; i++) {
  // 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.
  console.log(arrayLike[i]); // 1 2 3
}

• 유사 배열 객체는 이터러블이 아닌 일반 객체다. Symbol.Iterator 메서드가 없기 때문에 for...of 문으로 순회할 수 없다.

• ES6에서 이터러블이 도입되면서 arguments, NodeList, HTMLCollection은 유사 배열객체이면서 이터러블이다.