이터레이션

이터레이션

• Iteration의 사전적 의미: 반복
• for() 문의 반복 개념과 차이가 있음

const list = [10, 20];
for (let value of list){
    log(value);
};
const obj = list[Symbol.iterator]();
log(obj.next());
log(obj.next());
log(obj.next());

[실행 결과]

10

20

{value: 10, done: false}

{value: 20, done: false}

{value: undefined, done: true}

 

• 이터레이션을 위한 프로토콜(Protocol: 통신 프로토콜, 규약)이 필요
  • 데이터 송수신 프로토콜 정의
• 즉, 이터레이션은 프로토콜을 갖고 있으며 프로토콜에 따라 이터레이션 수행
• 프로토콜이 구문과 빌트인이 아니므로 프로토콜에 맞으면 이터레이션 가능

 

이터레이션 프로토콜

이터레이션 프로토콜(규약)은 오브젝트가 이터레이션 할 수 있는 구조이어야 하며, [10, 20]은 가능, 100은 불가능

const list = [10, 20];
const obj = list[Symbol.iterator]();

log(obj.next());
log(obj.next());
log(obj.next());

[실행 결과]

{value: 10, done: false}

{value: 20, done: false}

{value: undefined, done: true}

 

• 이터레이션 함수를 갖고 있어야 함
• 이터레이션 프로토콜 구분
  • 이터러블(iterable) 프로토콜
  • 이터레이터(iterator) 프로토콜
• 개발자 코드로 프로토콜을 맞추면 이터레이션 할 수 없는 오브젝트를 이터레이션 할 수 있도록 만들 수 있음

 

 

이터러블 프로토콜

• 오브젝트가 반복할 수 있는 구조이어야 하며 Symbol.iterator를 갖고 있어야 함

const list = [10, 20];
log(list[Symbol.iterator]);

[실행 결과]

function values() {[native code]}

 

• 아래의 빌트인 오브젝트는 디폴트로 이터러블 프로토콜을 갖고 있음
  • Array, Argument, String, TypedArray, Map, Set, DOM NodeList

 

이터러블 오브젝트

• 이터러블 프로토콜을 갖고 있는 오브젝트로 반복 구조, Symbol.iterator()
• 스펙에서는 @@iterator()로 표기

const list = [10, 20];    // [] 리터럴로 생성한 list에 Symbol.iterator가 있으므로 Array는 이터러블 오브젝트
log(list[Symbol.iterator]);

const obj = {one: 10, two: 20};    // {} 리터럴로 생성한 obj에 Symbol.iterator가 없으므로 Object는 이터러블 오브젝트가 아님
log(obj[Symbol.iterator]);

[실행 결과]

function values() {[native code]}

undefined

 

• 자체 오브젝트에는 없지만 이터러블 오브젝트를 상속받아도 됨
  • 즉, prototype chain(__proto__)에 있으면 됨
  • 예를 들어, Array 오브젝트를 상속받으면 이터러블 오브젝트가 됨

 

 

이터레이터 프로토콜

• 값을 순서대로 생성하는 방법(규약)

 

이터레이터 오브젝트

const list = [10, 20];
const obj = list[Symbol.iterator]();

log(obj.next());    // 이터레이터 오브젝트의 next()를 호출하면 이터레이터를 호출한다고 함
log(obj.next());
log(obj.next());

[실행 결과]

{value: 10, done: false}    // value는 [10, 20]에서 첫 번째 값이고, done: false는 이터레이터가 끝나지 않았다는 상태

{value: 20, done: false}    // value는 [10, 20]에서 en 번째 값이고, done: false는 이터레이터가 끝나지 않았다는 상태

{value: undefined, done: true}    // undefined는 처리할 값이 없다는 것, done: true는 이터레이터의 종료를 뜻함

 

• Symbol.iterator()를 호출하면 이터레이터 오브젝트를 생성하여 반환
• 이터레이터 오브젝트에 next()가 있음
• 생성한 오브젝트를 이터레이터라고도 부름