[JS] 이터러블(Iterable)과 이터레이터(Iterator)

이터러블(Iterable)과 이터레이터(Iterator)

이터레이터와 이터러블은 자바스크립트에서 컬렉션의 요소를 순회하는 메커니즘과 관련된 개념입니다.

이터러블 (Iterable)

이터러블은 반복 가능한 객체로, 객체 내의 요소들을 한 번에 하나씩 순회할 수 있는 구조를 말합니다. 자바스크립트에서 배열(Array), 문자열(String), Map, Set 등은 모두 내장된 이터러블입니다. 이터러블 객체는 Symbol.iterator 메소드를 구현하고 있으며, 이 메소드는 이터레이터를 반환합니다.

 

Symbol.iterator 메소드는 아래와 같은 특징을 가집니다.

• 매개변수 없이 호출됩니다.
• 이터레이터를 반환합니다.
• for...of 루프에서 자동으로 호출되어 순회를 수행합니다.

예를 들어, 배열은 이터러블입니다.

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

이터레이터 (Iterator)

이터레이터는 이터러블 객체의 요소를 탐색하기 위한 포인터 같은 역할을 합니다. 이터레이터는 next 메소드를 가진 객체로, next를 호출할 때마다 이터러블 객체의 다음 요소를 반환합니다.

next 메소드는 아래와 같은 특징을 가집니다:

• 매개변수 없이 호출됩니다.
• 이터레이터 결과 객체(iterator result object)를 반환합니다.
• 이터레이터 결과 객체는 두 개의 속성을 가집니다:
  • value: 현재 위치의 요소 값입니다.
  • done: 이터레이터가 순회를 마쳤으면 true, 아니면 false입니다.

이터레이터의 사용 예

const iterator = array[Symbol.iterator]();
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: undefined, done: true }

 

caption: Iterable과 Iterator 사용 사례

 

이터레이터의 핵심은 현재 위치를 기억하고 있으므로, next를 호출할 때마다 다음 요소로 이동한다는 점입니다. 이터레이터가 done이 true를 반환할 때까지 next를 호출하면 이터러블 객체의 모든 요소를 방문할 수 있습니다.

 

for...of 루프는 내부적으로 이터러블의 Symbol.iterator를 호출하고 반환받은 이터레이터의 next 메소드를 사용하여 객체를 순회합니다. 개발자가 직접 이터레이터를 사용하지 않더라도, 이터러블을 사용하여 편리하게 순회할 수 있는 것은 이러한 메커니즘 덕분입니다.