[modern JS Deep Dive] - 34장 . 이터러블

유선향·2025년 1월 18일
0

<modern_JS_Deep_Dive>

목록 보기
31/44

이터레이션 프로토콜

  • ES6 에서 도입되었다.
  • 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.

이터러블 프로토콜

  • Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
  • 위의 규약을 이터러블 프로토콜 이라 하며, 이를 준수한 객체를 이터러블 이라 한다.
  • 이터러블은 for … of 문으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.

이터레이터 프로토콜

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

이터러블

이터러블 프로토콜을 준수한 객체
Symbol.iterator 를 프로퍼티키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체

  • 이터러블은 for … of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.
// 예를 들어, 배열은 Array.prototype 의 Symbol.iterator 메서드를 상속받는 이터러블이다.
const arr = [1,2,3]
console.log(Symbol.iterator in arr) //true

//이터러블이 아닌 객체는 순회, 배열 디스트럭처링 할당의 대상으로 사용 x 
const obj = {a :1, b:2}
console.log(Symbol.iterator in obj) //false
for (const it of obj) { //typeError
	...
}
const [a,b] = obj { //typeError

이터러블과 유사 배열 객체

  • 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.
  • 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회 할 수 있고, 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지므로 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.
  • 그러나 유사 배열 객체는 이터러블이 아닌 일반 객체 이므로 for … of 문으로 순회 할 수 없다.

이터레이터

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다.

  • next 메서드는 포인터의 역할을 하고, 호출시 이터레이터 리절트 객체를 반환한다.
const arr = [1,2,3]
const iterator = arr[Symbol.iterator]()

console.log(iterator.next()) // {value:1,done:false}
...
console.log(iterator.next()) //{value:undefined,done:true}
//{value: 현재 순회중인 이터러블의 값 , done: 순회 완료 여부}

빌트인 이터러블

자바스크립트는 이터레이션 프로토콜을 준수한 객체인 빌트인 이터러블을 제공한다.


이터레이션 프로토콜의 필요성

ES6 이전의 순회 가능한 데이터 컬렉션의 순회

  • 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등 통일된 규약 없이 각자 나름의 구조를 가지고 for, for …in , forEach 메서드 등 다양한 방법으로 순회할 수 있었다.

ES6 이후

  • 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for … of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 했다.
  • 다양한 데이터 공급자가 이터레이션 프로토콜을 준수하므로 데이터 소비자는 이터레이션 프로토콜만 지원하도록 구현하면 된다.
  • 데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할을 한다.


0개의 댓글