[모던자바스크립트 DeepDive] 34. 이터러블

 본 글은 자바스크립트 스터디를 진행하면서 [모던자바스크립트 DeepDive] 책을 바탕으로 작성된 글입니다.

 

 

이터러블

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

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

 

📙 이터러블 프로토콜

Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나 프로토타입 체인을 통해 상속받고,

그 함수를 호출하면 이터레이터 프로토콜에 준수한 이터레이터를 반환하는 것을 이터러블 프로토콜이라고 한다

 

📙 이터레이터 프로토콜

위에서 말한 반환한 이터레이터가 next()를 소유하며, 

next()는 value와 done프로퍼티를 가지는 객체를 반환하는 것을 이터레이터 프로토콜이라고 한다

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

 

📌  Summary

• 이터러블은 이터러블 프로토콜을 준수하는 객체다.
• 이터러블 프로토콜을 준수하는 조건은 Symbol.iterator를 프로퍼티 키로 사용한 이터레이터 프로토콜을 준수하는 이터레이터를 반환하는 것이다
• 이터레이터 프로토콜을 준수하는 조건은 이터레이터가 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);
}

 

 

for ~ in과 for ~ of

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

 

 

유사 배열과 이터러블

유사 배열과 이터러블은 비슷하지만 다르다.
유사 배열은 인덱스로 프로퍼티값에 접근이 가능하고 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]