(TIL Day06-3)이터러블과 이터레이터

리스트 순회

• ES5 까지는 기본적인 for, for...in, forEach 메소드 등 다양한 방법으로 순회가능했다.
• ES6 에서부터는 for...of 문으로 array, set, map, 문자열을 간단하게 순회할 수 있다.
• 순회 가능한 자료구조를 이터러블로 통일하여 for...of, 스프레드 문법([...arr]), 구조 분해 할당의 대상으로 사용할 수 있도록 일원화했다.

 

이터러블 프로토콜(iterable protocol)

• Well-know Symbol(JS가 기본 제공하는 빌트인 심볼 값)인 Symbol.iterator를 프로퍼티 키로 사용한 메소드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메소드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
• 이러한 규약을 이터러블 프로토콜이라고 하며, 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다.

 

 

이터레이터 프로토콜(iterator protocol)

• 이터러블의 Symbol.iterator 메소드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환.
• 이터레이터는 next() 메소드를 소유하며, next() 메소드를 호출하면 이터러블을 순회한다. 순회를 하면서 value와 done 프로퍼티를 갖는 이터레이터를 객체로 반환한다.
• 이러한 규약을 이터레이터 프로토콜.
• 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할.

 

 

이터러블(iterable)

• 이터러블 프로토콜을 준수한 객체.
• 배열, 문자열, Map, Set은 이터러블 객체이다.
• 이터러블 객체는 for...of문 뿐만 아니라 스프레드 연산, 구조분해 할당이 가능하다.

// 이터러블 객체
function isIterable(item) {
  return item[Symbol.iterator] ? true : false;
}

const arr = new Array();
const map = new Map();
const set = new Set();
const obj = new Object();

console.log(isIterable(arr)); // true
console.log(isIterable(map)); // true
console.log(isIterable(set)); // true
console.log(isIterable(obj)); // false

const array1 = [1, 3, 5, 7, 9];
const array2 = [11, 13, 15, 17, 19];

// 스프레드 연산
const result = [...array1, ...array2];

// for...of문
for (const val of result) {
  console.log(val);	// 1 3 5 7 9 11 13 15 17 19
}

// 구조분해 할당
// head는 result의 첫번째 요소만 가지고, tail은 첫번째 요소를 제외한 나머지를 가진다.
const [head, ...tail] = result;

console.log(head, tail); // 1 [3, 5, 7, 9, 11, 13, 15, 17, 19]