34.1. 이터레이션 프로토콜
- ES6 도입된 이터레이션 프로토콜: 순회 가능한 데이터 컬렉션(자료 구조)을 위한 규칙
- for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용하도록 일원화
- 이터러블 프로토콜 (iterable)
- Symbol.iterator를 프로퍼티 키로 사용하거나 상속 받아 호출하여 이터레이터 프로토콜을 준수한 이터레이터 반환함
- 이를 준수한 객체를 이터러블이라고 함
- 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능
- 이터레이터 프로토콜 (interator)
- Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터 반환
- next 메소드: value, done 프로퍼티를 갖는 이터레이터 리절트 객체 반환
- 이러한 규약을 이터레이터 프로토콜, 이를 준수한 객체를 이터레이터라고 함
- 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할
34.1.1. 이터러블
- 이터러블: 이터러블 프로토콜을 준수한 객체
- Symbol.iterator를 프로퍼티 키로 사용하거나 상속받은 객체
- for ... of 문으로 순회 가능
- 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능
- 일반 객체는 이터러블이 아님
- 스프레드 프로퍼티 제안(Stage 4)은 일반 객체에 스프레드 문법 사용 허용
34.1.2. 이터레이터
- 이터러블 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터 반환
- 이터레이터의 next 메서드
- 각 요소를 순회하기 위한 포인터 역할
- 이터러블을 순회하며 결과를 나타내는 이터레이터 리절트 객체 반환
- value : 순회 중인 이터러블의 값
- done : 이터러블의 순회 완료 여부
34.2. 빌트인 이터러블
- 이터레이션 프로토콜을 준수한 빌트인 이터러블 객체 제공
- Array : Array.prototype[Symbol.iterator]
- String : String.prototype[Symbol.iterator]
- Map : Map.prototype[Symbol.iterator]
- Set : Set.prototype[Symbol.iterator]
- TypedArray : TypedArray.prototype[Symbol.iterator]
- arguments : arguments[Symbol.iterator]
- DOM 컬렉션 : NodeList.prototype[Symbol.iterator], HTMLCollection.prototype[Symbol.iterator]
34.3. for ... of 문
- 이터러블을 순회하면서 이터러블 요소를 변수에 할당함
- for (변수선언문 of 이터러블) { ... }
- for ... in 문과 유사함 -> 심벌 프로퍼티 키 열거 제외
- 이터레이터의 next 메서드 호출하여 순회
- 이터레이터 리절트 객체의 value 값을 변수에 할당함
- 이터레이터 리절트 객체의 done 값이 true가 되면 순회 중단
34.4. 이터러블과 유사 배열 객체
- 유사 배열 객체는 이터러블이 아닌 일반 객체
- Symbol.iterator 메서드가 없으므로 for ... of 문 순회 불가
- ES6 이터러블 도입하면서 배열, arguments, NodeList, HTMLCollection 객체에 Symbol.iterator 메서드 구현
- 유사 배열 객체이면서 이터러블
- arrayLike 제외
- 유사 배열 객체는 ES6 도입된 Array.from 메서드를 통해 이터러블로 변환 가능
34.5. 이터레이션 프로토콜의 필요성
- ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사배열 객체 등)은 다양한 방법으로 순회함
- ES6 이터레이션 프로토콜을 통해 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화
- 이터러블은 데이터 공급자의 역할
- 이터레이션 프로토콜을 규정하여 해당 규정만 지원하도록 구현하면 됨
- 이터레이션 프로토콜은 하나의 순회 방식을 규정하여, 효율적으로 다양한 데이터 공급자를 사용할 수 있도록 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할

34.6. 사용자 정의 이터러블
34.6.1. 사용자 정의 이터러블 구현
- 이터레이션 프로토콜을 준수하도록 Symbol.iterator 메서드 구현
- Symbol.iterator 메서드 구현
- Symbol.iterator 메서드가 next 메서드를 갖는 이터레이터 반환하도록 함
- next 메서드는 done과 value 프로퍼티를 갖는 이터레이터 리절트 객체 반환
- done = true 가 되면 반복 중지
34.6.2. 이터러블을 생성하는 함수
- 수열의 최대값을 인수로 전달받아 이터러블 반환하는 함수 구현 가능
34.6.3. 이터러블이면서 이터레이터인 객체를 생성하는 함수
- 이터러블의 Symbol.iterator 메서드 호출하면 이터레이터 생성 가능
{
[Symbol.iterator]() { returnL this; },
next() {
return { value: any, done: boolean };
}
}
34.6.4. 무한 이터러블과 지연 평가
- 최대값 없이 구현하면 무한 이터러블 생성 가능
- 지연 평가 : 데이터가 필요한 시점 이전까지는 생성하지 않다가 필요한 시점에 생성하는 기법
- 평가 결과가 필요할 때까지 평가를 늦추는 기법
- 무한 이터러블을 생성하는 메서드에서 데이터 소비자인 for ... of 문이나 배열 디스트럭처링 할당 등이 실행되기 전까지는 데이터를 생성하지 않음
- 지연 평가를 사용하면 필요한 순간에 생성하므로 빠른 속도와 불필요한 메모리를 소비하지 않음
[출처] 모던 자바스크립트, Deep Dive