[자바스크립트 ES6+ 기본] 4. 이터레이션(Iteration)

이터레이션 (Iteration)

• 과정 중간에 이터레이션 개념 이해가 필요하므로

  • 먼저 다루며
  • 이 장에서는 이터레이션 개념만 다루고
  • 자세한 것은 Symbol 오브젝트에서 다룸

• 이터레이션의 사전적 의미: 반복

  • 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] }

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

이터러블 오브젝트

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

/*
1. [] 리터럴로 생성한 list에 Symbol.iterator가 있으므로 Array는 이터러블 오브젝트
2. {} 리터럴로 생성한 obj에 Symbol.iterator가 없으므로 Object는 이터러블 오브젝트가 아님
3. for 문의 반복과 이터레이션이 차이가 있듯이 for-in의 열거와 이터레이션은 차이가 있음
*/
const list = [10, 20];
log(list[Symbol.iterator]);

const obj = {one: 10, two: 20};
log(obj[Symbol.iterator]);

// function values() { [native code] }
// undefined

• 이터러블 오브젝트 구조

• 자체 오브젝트에는 없지만

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

이터레이터 프로토콜

• 값을 순서대로 생성하는 방법(규약)
• 이터레이터 오브젝트
  • Symbol.iterator()를 호출하면
  • 이터레이터 오브젝트를 생성하여 반환
  • 이터레이터 오브젝트에 next()가 있음
  • 생성한 오브젝트를 이터레이터라고도 부름

/*
1. 이터레이터 오브젝트의 next()를 호출하면 이터레이터를 호출한다고도 함
2. {value: 10, done: false}를 반환. value는 [10, 20]에서 첫 번째 값이고 done: false는 이터레이터 상태
3. 두 번째 next() 호출
4. {value: 20, done: false}를 반환. value는 [10, 20]에서 두 번째 값이고 done: false는 이터레이터 상태
5. 세 번째 next() 호출
6. {value: undefined, done: true} 반환. undefined는 처리할 값이 없다는 것을 뜻하며 done: true는 이터레이터의 종료를 뜻함
*/
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}

• 이터레이터 오브젝트 구조