본 정리글은 인프런 김영보 강사님의 자바스크립트 ES6+ 기본 강의를 수강하고 정리한 글입니다.

자바스크립트 ES6+ 기본

📖 이터레이션

📌 이터레이션

• 과정 중간에 이터레이션 개념 이해가 필요하므로 먼저 다루며, 이 장에서는 이터레이션의 개념만 다루고 자세한 것은 Symbol 오브젝트에서 다룸

• 이터레이션(Iteration)의 사전적 의미 : 반복
  -- for() 문의 반복 개념과 차이 있음 [코드 1]
  -- 강좌에서는 이터레이션과 반복을 같이 사용

// [코드 1]
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) 필요
  -- ex) 통신 프로토콜 (규약)
  -- 데이터 송수신 프로토콜 정의

• 즉, 이터레이션은 프로토콜을 갖고 있으며 프로토콜에 따라 이터레이션 수행
  -- 프로토콜이 구문과 빌트인이 아니므로 프로토콜에 맞으면 이터레이션 가능

📌 이터레이션 프로토콜

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

// [코드 1]
const list = [10, 20];
const obj = list[Symbol.iterator](); // 이터러블 프로토콜

log(obj.next()); // 이터레이터 프로토콜
log(obj.next());
log(obj.next());

[실행 결과]
{value : 10, done : false}
{value : 10, done : false}
{value : undefined, done : true}

• 이터레이션 함수를 갖고 있어야 함

• 이터레이션 프로토콜 구분
  -- 이터러블(iterable) 프로토콜
  -- 이터레이터(iterator) 프로토콜

• 개발자 코드로 프로토콜을 맞추면 이터레이션 할 수 없는 오브젝트를 이터레이션 할 수 있도록 만들 수 있음

📌 이터러블 프로토콜

• 이터러블 프로토콜이란?
  -- 오브젝트가 반복할 수 있는 구조이어야 함
  -- Symbol.iterator를 갖고 있어야 함 [코드 1]

// [코드 1]
const list = [10, 20];
log(list[Symbol.iterator]);

[실행 결과]
function values(){[native code]}

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

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

// [코드 1]
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 오브젝트를 상속받으면 이터러블 오브젝트가 됩니다

📌 이터레이터 프로토콜

• 이터레이터(iterator) 프로토콜
  -- 값을 순서대로 생성하는 방법 (규약)

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

// [코드 1]
const list = [10, 20];
const obj = list[Symbol.iterator]();
log(obj.next());
log(obj.next());
log(obj.next());

[실행 결과]
{value : 10, done : false}

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. 세 번째 net() 호출

6. {value : undefined, done : true} 반환. undefined는 처리할 값이 없다는 것을 뜻하며 done : true는 이터레이터의 종료를 뜻함.

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