제네레이터

실행 흐름을 중간에 멈췄다가 다시 이어서 실행할 수 있는 자바스크립트의 특수한 함수다.

핵심 특징

일반 함수와 달리 function* 키워드로 정의하며, 내부에서 yield 키워드로 값을 순차적으로 반환한다. 함수를 실행해도 코드가 즉시 실행되지 않고, 대신 이터레이터 객체를 반환한다.

동작 원리

반환된 이터레이터는 next() 메서드를 통해 값을 하나씩 꺼낼 수 있으며, yield 지점에서 실행이 멈췄다가 다음 next() 호출 시 그 지점부터 다시 실행된다.

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

제네레이터의 가장 큰 특징은 함수의 실행 상태를 보존하면서 여러 번 호출할 수 있다는 점이다. 이 덕분에 데이터를 지연 평가하거나 복잡한 반복 로직, 커스텀 이터러블 등을 구현할 때 유용하게 사용된다.

사용 예

배열에서 조건에 맞는 값만 순회하고 싶을 때, 조건 필터링을 포함한 이터러블을 만들 수 있다.

function* validNumbers(numbers) {
  for (const num of numbers) {
    if (typeof num === "number" && !isNaN(num)) {
      yield num;
    }
  }
}

const mixed = [1, "a", 2, NaN, 3];
for (const n of validNumbers(mixed)) {
  console.log(n); // 1, 2, 3
}

핵심 정리

제네레이터는 function*과 yield로 실행 상태를 유지하면서 값을 하나씩 반환하는 함수이며, 실행 중단·재개가 가능해 지연 평가와 커스텀 이터러블 구현에 활용된다.

→ 제네레이터에 대해 설명해주세요

CSLOG에서 보기