요약

1. 이터러블

이터러블이란 이터러블 프로토콜을 준수하는 객체다.

이터러블이면 for ~ of, spread operator, destructuring가 사용 가능하다.

1.1 이터러블 프로토콜

Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나 프로토타입 체인을 통해 상속받고, 그 함수를 호출하면 이터레이터 프로토콜에 준수한 이터레이터를 반환하는 것을 이터러블 프로토콜이라고 한다.

1.2 이터레이터 프로토콜

위에서 말한 반환한 이터레이터가 next()를 소유하며, next()는 value와 done프로퍼티를 가지는 객체를 반환하는 것을 이터레이터 프로토콜이라고 한다

이 이터레이터는 요소를 탐색하기 위한 포인터 역할을 한다.

1.3 정리 및 예시

• 정리

1. 이터러블은 이터러블 프로토콜을 준수하는 객체다.
2. 이터러블 프로토콜을 준수하는 조건은 Symbol.iterator를 프로퍼티 키로 사용한 이터레이터 프로토콜을 준수하는 이터레이터를 반환하는 것이다.
3. 이터레이터 프로토콜을 준수하는 조건은 이터레이터가 next()를 반환하며, next()는 value와 done을 키로 가지는 객체를 반환하는 것이다.

• 이터러블 예시

// 이터러블인 배열 선언
const array = [1, 2, 3];

// iterable
// 배열의 이터레이터(포인터)를 추출 ( 이터러블 프로토콜을 준수하기 때문에 이터레이터를 반환함 )
const iterator = array[Symbol.iterator]();

// 이터레이터 프로토콜을 준수하기 때문에 next()를 호출할 수 있으며, value와 done을 키로 가진 객체를 반환함
iterator.next();	// { value: 1, done: true }
iterator.next();	// { value: 2, done: true }
iterator.next();	// { value: 3, done: false }

• 이터러블이 아닌 예시

const person = { name: "john", age: 23 };

console.log(person[Symbol.iterator]);	// undefined

// person is not iterable
for(let p of person){
  console.log(p);
}

2. for ~ in과 for ~ of

for ~ of은 이터러블을 기준으로 돌아간다. ( next()를 사용함 )
for ~ in은 [[Enumeralbe]]값이 true인 것을 기준으로 돌아간다.

3. 유사 배열과 이터러블

유사 배열과 이터러블은 비슷하지만 다르다.
유사 배열은 인덱스로 프로퍼티값에 접근이 가능하고 length를 가지는 것이 유사 배열이다.

// 유사 배열
const arrayLike = {
  0: "a",
  1: "b",
  2: "c",
  length: 3,
}

console.log([...arrayLike]);	// error

const array = Array.form(arrayLike);
console.log([...array]);		// [a, b, c]