자바스크립트 이터러블 정리

이터러블을 이해하려면 일단 Symbol 데이터 타입을 이해해야한다.

자바스크립트 Symbol 정리 글

일단 이터러블이라는 뜻이 무엇일까?

사전에서 이터러블은 반복될 수 있는, 반복할 수 있는 이라고 정의하고 있다.

그리고 자바스크립트 내에서 이터러블은 이터러블 프로토콜을 준수한 객체라고 정의한다.

❓ 이터러블 프로토콜이란 ❓

Symbol.iterator(자바스크립트 내에서 제공하는 빌트인 심볼값, Symbol 함수의 프로퍼티 값)를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.

이러한 규약을 이터러블 프로토콜이라고 한다.

❓ 이터레이터 프로토콜이란 ❓

이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터를 반환한다. 이 이터레이터는 next() 메서드를 소유하고 있고, next() 를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다.

이러한 규약을 이터레이터 프로토콜이라고 하며, 이터레이터 프로토콜을 준수한 객체를 이터레이터라고 한다.

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

위의 설명에 따라 이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 객체를 말하고 이 객체는 이터레이터를 반환한다.

배열, 문자열, Map, Set이 대표적인 이터러블이다.

// arr라는 배열은 Symbol.iterator 메서드를 상속받은 객체이다.

const arr = [1, 2, 3, 4];

console.log(Symbol.iterator in arr); // true

//이터러블 배열은 for of 문으로 순회 가능하다.

for(let x of arr){
  console.log(x); // 1 2 3 4
}

🔍 for 문으로 for of 문 작성하기

const arr = [1, 2, 3, 4];

const iterator = arr[Symbol.iterator]();


for(;;){

  const res = iterator.next();

  if(res.done) {
    break;
  }

  const item = res.value;
  console.log(item); // 1, 2, 3, 4

}

📌 객체는 이터러블이 아니기 때문에 for of 문으로 순회가 불가능하다.

const obj = { a : 1, b : 2}

console.log(Symbol.iterator in obj); // false

for(let x of obj){
  console.log(x); // obj is not iterable
}

🔍 이터레이터 확인해보기

const arr = [1, 2, 3, 4];

const iterator = arr[Symbol.iterator]();

console.log(iterator); // Object [Array Iterator] {}
console.log('next' in iterator); // true

// next() 를 이용해서 리절트 객체 반환

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

🔍 빌트인 이터러블