이터러블 프로토콜

자바스크립트에서 데이터를 순차적으로 순회할 수 있도록 정해놓은 규약이다.

등장 배경

배열, String, Set, Map 등은 서로 다른 내부 구조를 가지고 있지만, 이터러블 프로토콜을 따르기 때문에 for...of문이나 스프레드 연산자 같은 동일한 문법으로 순회할 수 있다. 이 통일성 덕분에 개발자는 자료구조마다 다른 순회 방식을 고민하지 않아도 된다.

동작 원리

어떤 객체가 이터러블로 간주되려면 Symbol.iterator라는 키를 가진 메서드가 정의되어 있어야 하고, 이 메서드는 이터레이터 객체를 반환해야 한다. 반환된 이터레이터 객체는 next() 메서드를 가지고 있으며, 이를 호출하면 { value, done } 형태의 결과를 반환한다. 이 과정을 반복해 내부 데이터를 순서대로 꺼낼 수 있다.

사용 예

Symbol.iterator 메서드를 직접 구현하면 커스텀 이터러블 객체를 만들 수 있다.

const customIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        return index < this.data.length
          ? { value: this.data[index++], done: false }
          : { done: true };
      }
    };
  }
};

for (const item of customIterable) {
  console.log(item); // 1, 2, 3 차례로 출력
}

핵심 정리

이터러블 프로토콜은 "순회할 수 있는 객체"의 공통된 인터페이스를 정의해, 서로 다른 자료구조를 일관된 방식으로 탐색할 수 있게 한다.

→ 이터러블 프로토콜에 대해 설명해주세요.