이터레이션 프로토콜
- ES6 에서 도입되었다.
- 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.
이터러블 프로토콜
- Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
- 위의 규약을 이터러블 프로토콜 이라 하며, 이를 준수한 객체를 이터러블 이라 한다.
- 이터러블은 for … of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.
이터레이터 프로토콜
- 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유하며 next 메서드를 호출하면 이터러블을 순회하며 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다.
- 위의 규약을 이터레이터 프로토콜이라 하며, 이터레이터 프로토콜을 준수한 객체를 이터레이터 라고 한다.
- 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다.
이터러블
이터러블 프로토콜을 준수한 객체
Symbol.iterator 를 프로퍼티키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체
- 이터러블은 for … of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.
const arr = [1,2,3]
console.log(Symbol.iterator in arr)
const obj = {a :1, b:2}
console.log(Symbol.iterator in obj)
for (const it of obj) {
...
}
const [a,b] = obj {
이터러블과 유사 배열 객체
- 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.
- 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회 할 수 있고, 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지므로 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.
- 그러나 유사 배열 객체는 이터러블이 아닌 일반 객체 이므로 for … of 문으로 순회 할 수 없다.
이터레이터
이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다.
- next 메서드는 포인터의 역할을 하고, 호출시 이터레이터 리절트 객체를 반환한다.
const arr = [1,2,3]
const iterator = arr[Symbol.iterator]()
console.log(iterator.next())
...
console.log(iterator.next())
빌트인 이터러블
자바스크립트는 이터레이션 프로토콜을 준수한 객체인 빌트인 이터러블을 제공한다.

이터레이션 프로토콜의 필요성
ES6 이전의 순회 가능한 데이터 컬렉션의 순회
- 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등 통일된 규약 없이 각자 나름의 구조를 가지고 for, for …in , forEach 메서드 등 다양한 방법으로 순회할 수 있었다.
ES6 이후
- 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for … of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했다.
- 다양한 데이터 공급자가 이터레이션 프로토콜을 준수하므로 데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현하면 된다.
- 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할을 한다.
