Iterator, Iterable, Generator의 관계를 설명해주세요.

Iterable은 Symbol.iterator를 통해 Iterator를 반환하고, Iterator는 next()로 값을 순차적으로 제공합니다. Generator는 function*와 yield로 Iterator이면서 Iterable인 객체를 쉽게 만들게 해줍니다.

핵심 개념

핵심 기준은 Symbol.iterator, next, yield의 역할입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

JavaScript는 실행 문맥, 비동기 흐름, 참조 관계가 코드 동작에 직접 영향을 주는 언어입니다. 그래서 문법을 외우는 것보다 값이 언제 결정되고 어떤 순서로 실행되는지 이해하는 것이 중요합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (const value of range(1, 3)) {
  console.log(value); // 1, 2, 3
}

Generator는 값을 한 번에 모두 만들지 않고 필요할 때 하나씩 생산합니다. 큰 데이터나 커스텀 순회 로직을 다룰 때 유용합니다.

실무에서 주의할 점

• 암묵적 변환이나 실행 문맥에 기대면 작은 리팩터링에도 동작이 달라질 수 있습니다.
• 비동기 코드에서는 실행 순서와 에러 전파 경로를 반드시 확인해야 합니다.
• 브라우저 이벤트나 타이머를 사용했다면 정리(cleanup) 시점을 놓치지 않는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

JS, Iterator, Iterable, Generator

정리

한 줄로 정리하면, Iterable은 Symbol.iterator를 통해 Iterator를 반환하고, Iterator는 next()로 값을 순차적으로 제공합니다. Generator는 function*와 yield로 Iterator이면서 Iterable인 객체를 쉽게 만들게 해줍니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

Iterable 프로토콜과 Iterator 프로토콜

Iterable은 Symbol.iterator 메서드를 가진 객체이고, Iterator는 next()를 호출할 때 { value, done }을 반환하는 객체입니다. for...of, spread, destructuring은 이 프로토콜을 사용합니다.

const iterable = {
  [Symbol.iterator]() {
    let i = 0;
    return {
      next() {
        return i < 3 ? { value: i++, done: false } : { value: undefined, done: true };
      },
    };
  },
};

console.log([...iterable]); // [0, 1, 2]

Generator는 Iterator를 쉽게 만드는 문법

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (const n of range(1, 3)) {
  console.log(n); // 1, 2, 3
}

Generator 함수는 호출해도 즉시 실행되지 않고 iterator 객체를 반환합니다. next()가 호출될 때마다 yield 지점까지 실행됩니다.

활용 예

• 큰 데이터를 한 번에 만들지 않고 필요한 만큼만 순회
• 페이지네이션/스트림 처리 모델링
• 커스텀 컬렉션을 for...of와 호환되게 만들기