제너레이터 함수

일반 함수는 한 번 부르면 끝까지 실행된 뒤 값을 하나 돌려줍니다. 제너레이터 함수(generator function)는 실행하다가 yield를 만나면 값을 하나 내보내고 그 자리에서 멈추었다가, 바깥에서 다음 값을 요청하면 멈춘 곳부터 이어서 실행합니다. 그래서 값을 한꺼번에 만들어 두지 않고 필요할 때마다 하나씩 만들어 낼 수 있습니다.

이 글은 제너레이터가 멈추고 이어지는 순서를 next 호출과 출력으로 추적하고, 그 타입을 적는 방법을 봅니다. 이어서 다른 반복 가능한 값에 일을 맡기는 yield*, 끝없는 시퀀스와 직접 만든 이터러블, 바깥에서 흐름을 끝내거나 오류를 넣는 방법을 보고, 마지막으로 비동기 제너레이터를 다룹니다.

멈추고 이어지는 함수

제너레이터 함수는 function*으로 선언합니다. 이 함수를 부르면 본문이 바로 실행되지 않고, 실행을 조종할 수 있는 제너레이터 객체가 돌아옵니다. 그 객체의 next()를 부를 때마다 본문이 다음 yield까지 실행되고, 내보낸 값을 { value, done } 모양의 결과로 돌려줍니다.

function* simpleGenerator(): Generator<number, string, boolean> {
  console.log("본문 시작");
  let input = yield 1;
  console.log("첫 yield 뒤 재개, 입력값:", input);
  input = yield 2;
  console.log("둘째 yield 뒤 재개, 입력값:", input);
  return "모든 작업 완료!";
}

const generator = simpleGenerator();
console.log("객체 생성 완료");
console.log(generator.next());
console.log(generator.next(true));
console.log(generator.next(false));
console.log(generator.next());

객체 생성 완료
본문 시작
{ value: 1, done: false }
첫 yield 뒤 재개, 입력값: true
{ value: 2, done: false }
둘째 yield 뒤 재개, 입력값: false
{ value: '모든 작업 완료!', done: true }
{ value: undefined, done: true }

simpleGenerator()를 불렀을 때는 아무것도 출력되지 않았고, 첫 next()에서야 본문이 시작되어 yield 1에서 멈춥니다. 두 번째 호출의 next(true)에서 true는 멈추어 있던 yield 1이라는 식의 값이 되어 input에 들어가고, 본문은 다음 yield 2까지 실행됩니다. 마지막 return의 값은 done: true인 결과에 담기며, 끝난 뒤의 next()는 언제나 { value: undefined, done: true }를 돌려줍니다.

위 그림은 이 교환을 호출하는 쪽과 제너레이터 사이의 순서로 보여 줍니다. 값은 yield를 통해 바깥으로 나가고, next의 인수를 통해 안으로 들어옵니다. 첫 next에 넘긴 인수는 받을 yield가 아직 없으므로 쓰이지 않습니다.

Generator<number, string, boolean>의 세 타입 매개변수는 차례로 yield로 내보내는 값, return으로 돌려주는 값, next로 받아들이는 값의 타입입니다. 그래서 generator.next("문자열")처럼 넘기면 boolean이 아니어서 진단되고, yield 1이라는 식의 타입은 받아들이는 값인 boolean입니다. 나가는 값 1과 들어오는 값 true는 서로 다른 값이라는 점을 기억해야 합니다.

yield*로 맡기기

yield* 뒤에 다른 이터러블을 두면, 그 이터러블이 끝날 때까지 그 값들을 대신 내보냅니다. 배열이나 문자열, 다른 제너레이터에 일을 맡겨 여러 시퀀스를 하나로 이을 수 있습니다.

function* anotherGenerator(): Generator<number> {
  yield 5;
  yield 6;
}

function* combined(): Generator<number> {
  yield 1;
  yield* [2, 3, 4];
  yield* anotherGenerator();
  yield 7;
}

console.log([...combined()].join(" "));

1 2 3 4 5 6 7

전개 구문 [...combined()]은 제너레이터가 끝날 때까지 next를 불러 모든 값을 배열로 모으므로, 일곱 개의 숫자가 차례로 나옵니다. for...of도 같은 방식으로 값을 꺼내며, 둘 다 done: true인 결과의 value, 곧 return의 값은 항목으로 세지 않습니다.

필요할 때 만드는 시퀀스

제너레이터는 다음 값이 요청될 때만 실행되므로, 끝이 없는 시퀀스도 만들 수 있습니다. 전체를 미리 만들어 두는 배열과 달리, 요청한 만큼만 계산합니다.

function* idGenerator(): Generator<number, never, void> {
  let id = 0;
  while (true) {
    yield id++;
  }
}

const ids = idGenerator();
console.log(ids.next().value, ids.next().value, ids.next().value);

0 1 2

while (true)는 끝나지 않지만, yield에서 멈추므로 프로그램이 멈추지는 않습니다. 이 제너레이터는 절대 return하지 않으므로 반환 타입을 never로 적었습니다. 다만 이런 제너레이터를 전개 구문이나 끝을 정하지 않은 for...of로 모두 꺼내려 하면 끝나지 않으므로, 필요한 개수만큼만 요청해야 합니다.

제너레이터 객체는 그 자체로 이터러블이므로, 클래스의 [Symbol.iterator] 메서드를 제너레이터로 만들면 그 클래스의 객체를 for...of로 돌 수 있습니다.

class MyCollection<T> {
  constructor(private items: T[]) {}

  *[Symbol.iterator](): Generator<T> {
    for (const item of this.items) {
      yield item;
    }
  }
}

for (const num of new MyCollection([10, 20, 30])) {
  console.log(num);
}

10
20
30

for...of는 시작할 때 [Symbol.iterator]()를 불러 새 제너레이터를 얻으므로, 같은 컬렉션을 여러 번 돌아도 매번 처음부터 시작합니다. 반면 이미 만든 제너레이터 객체 하나를 두 번 돌면, 두 번째에는 첫 번째에서 멈춘 상태를 이어서 쓰므로 남은 값이 없을 수 있습니다.

더 깊이: 이터레이터에 직접 붙은 map과 take

끝없는 제너레이터에서 필요한 개수만큼만 꺼내는 일을 이제는 표준 메서드로 할 수 있습니다. ECMAScript의 이터레이터 도우미(iterator helpers)가 들어오면서, 제너레이터가 만든 객체에도 map, filter, take 같은 메서드가 생겼습니다. TypeScript 5.6 릴리스 노트의 예처럼 끝없는 양의 정수 제너레이터에 map(x => x * 2)를 붙이고 take(5)로 다섯 개만 돌면 2, 4, 6, 8, 10이 나옵니다. 이 메서드들은 배열의 같은 이름의 메서드와 달리 결과를 미리 모두 만들지 않고, 값을 요청받을 때마다 원래 이터레이터에서 하나씩 꺼내 처리합니다. Map과 Set의 keys(), values(), entries()도 같은 메서드를 가지며, 다른 이터러블은 Iterator.from으로 감싸 쓸 수 있습니다.

이 메서드의 타입은 표준 라이브러리 설정에 따라 보입니다. TypeScript 6.0은 이 Iterator 메서드의 선언을 esnext에서 es2025로 옮겼으므로, target이나 lib가 ES2025 이상이어야 쓸 수 있습니다. 이 교재의 ts-first처럼 target을 es2022로 둔 프로젝트라면 lib에 es2025를 더해야 하고, 실행 환경도 이 메서드를 지원해야 합니다. 5.6은 이런 내장 이터레이터를 나타내는 IteratorObject 타입도 들였으며, 9장의 strictBuiltinIteratorReturn이 켜져 있으면 내장 이터레이터의 반환 타입은 any가 아니라 undefined로 다루어집니다.

return과 throw

제너레이터 객체에는 next 말고도 바깥에서 흐름을 바꾸는 두 메서드가 있습니다. throw(error)는 멈추어 있는 yield의 자리에서 그 오류를 던진 것처럼 만들고, return(value)는 그 자리에서 return한 것처럼 만들어 제너레이터를 끝냅니다.

function* errorHandlingGenerator(): Generator<number, number> {
  try {
    yield 1;
    yield 2;
  } catch (error) {
    console.log("내부에서 포착:", error instanceof Error ? error.message : error);
  } finally {
    console.log("정리 작업");
  }
  return 4;
}

const errGen = errorHandlingGenerator();
console.log(errGen.next());
console.log(errGen.throw(new Error("외부에서 주입한 오류")));
console.log(errGen.next());

{ value: 1, done: false }
내부에서 포착: 외부에서 주입한 오류
정리 작업
{ value: 4, done: true }
{ value: undefined, done: true }

yield 1에서 멈추어 있을 때 throw를 부르면 그 자리에서 오류가 생기므로, 본문의 catch가 받아 메시지를 출력하고 finally를 지나 return 4로 끝납니다. 그래서 throw 호출의 결과가 { value: 4, done: true }이고, yield 2는 실행되지 않습니다. 본문에 catch가 없었다면 그 오류는 throw를 부른 쪽으로 다시 던져집니다.

비동기 제너레이터

async function*으로 선언한 비동기 제너레이터는 본문에서 await를 쓸 수 있고, next()가 결과를 담은 Promise를 돌려줍니다. 이런 값은 for await...of로 하나씩 기다리며 꺼냅니다.

async function* userStream(): AsyncGenerator<string, void, void> {
  for (const [index, user] of ["Alice", "Bob", "Charlie"].entries()) {
    console.log(`[Gen] 사용자 ${index + 1} 요청`);
    await new Promise((resolve) => setTimeout(resolve, 50));
    yield user;
  }
  console.log("[Gen] 스트림 종료");
}

async function processUserStream(): Promise<void> {
  for await (const user of userStream()) {
    console.log(`처리: ${user}`);
  }
  console.log("모든 사용자 처리 완료");
}

processUserStream();

[Gen] 사용자 1 요청
처리: Alice
[Gen] 사용자 2 요청
처리: Bob
[Gen] 사용자 3 요청
처리: Charlie
[Gen] 스트림 종료
모든 사용자 처리 완료

for await가 다음 값을 요청할 때마다 제너레이터는 한 사용자를 기다렸다가 내보내고, 반복문의 본문이 그 값을 처리한 뒤에야 다음 값을 요청합니다. 그래서 요청과 처리가 한 사용자씩 번갈아 출력되며, 소비하는 쪽이 값을 당겨 가는 속도에 맞추어 만들어집니다. 마지막 값을 처리한 뒤의 요청에서 제너레이터의 반복문이 끝나 스트림 종료가 출력되고, 그다음에 바깥 반복문이 끝납니다.

일반 제너레이터의 next는 다음 yield까지 동기적으로 실행된다는 점도 구분해야 합니다. yield 앞에서 오래 계산하면 그 next 호출도 그만큼 오래 걸리며, 제너레이터라는 이유만으로 무거운 계산이 비동기가 되지는 않습니다. async와 await가 생기기 전에는 일반 제너레이터가 Promise를 yield하고 실행기가 그것을 기다려 주는 방식으로 비동기 흐름을 쓰기도 했는데, 지금은 대부분 async 함수가 그 역할을 맡습니다.

위 그림처럼 도구는 값이 하나인지 여럿인지, 지금 있는 값인지 요청할 때 만드는 값인지로 고릅니다. 하나의 값은 그대로 돌려주고, 나중에 한 번 나오는 값은 Promise로, 이미 모인 여러 값은 배열로 다룹니다. 요청할 때마다 하나씩 만드는 값은 제너레이터로, 하나씩 기다려야 하는 값은 비동기 제너레이터로 다루며, 중간에 멈춘 반복을 정리하는 일을 누가 맡는지도 함께 정합니다.

정리

• 제너레이터 함수는 부르면 본문을 실행하지 않고 객체를 돌려주며, next()를 부를 때마다 다음 yield까지 실행하고 멈춥니다.
• next의 인수는 멈추어 있던 yield 식의 값이 되고, Generator<Y, R, N>은 내보내는 값과 돌려주는 값, 받아들이는 값의 타입을 적습니다.
• yield*는 다른 이터러블에 일을 맡기고, for...of와 전개 구문은 return의 값을 항목으로 세지 않습니다.
• 제너레이터는 요청한 만큼만 값을 만들어 끝없는 시퀀스도 표현할 수 있고, [Symbol.iterator]를 제너레이터로 만들면 직접 만든 이터러블이 됩니다.
• throw와 return은 멈추어 있는 yield의 자리에서 오류나 반환을 일으키고, 비동기 제너레이터는 for await로 값을 하나씩 기다려 꺼냅니다.

연습 문제

1. 입력 순서를 바꾼 호출

새 simpleGenerator() 객체 g에 g.next(), g.next(false), g.next(true), g.next()를 차례로 부르면, 네 결과와 두 입력값의 로그는 무엇인가요?

2. 시작 전의 return

아직 next()를 부르지 않은 새 errorHandlingGenerator() 객체에 return(10)을 먼저 부르면 결과는 무엇이고, 정리 작업은 출력되나요?

3. 한 번 쓴 제너레이터 다시 돌기

const gen = combined();로 객체 하나를 만들고 console.log([...gen].length, [...gen].length);를 실행하면 무엇이 출력되나요? new MyCollection([1, 2])을 두 번 펼치면 어떻게 다른가요?

다음 글 RxJS와 반응형 프로그래밍에서는 값을 당겨 가는 제너레이터와 반대로, 값이 생길 때마다 밀어 보내는 Observable과 그것을 다루는 RxJS를 다룹니다.