2. 제너레이터

1. 소개

제너레이터(Generator) 는 함수의 실행을 중간에 멈췄다가 다시 이어서 실행할 수 있게 해주는 설계 방식(구조) 를 지칭하며,

자바스크립트의 제너레이터 함수는 iterator를 사용함으로써 함수 내부 코드의 호출타이밍을 사용자가 제어할 수 있게 해준다.

2. 문법

2-1. function*

자바스크립트에서 제너레이터 함수는 function* 키워드로 정의되며, 일반함수와 달리 한번에 끝까지 실행되지 않는다.

함수호출시 iterator를 반환하며, next() 함수를 호출할때마다, yield return 지점까지 실행을 재개한다.

(유니티 엔진의 코루틴처럼)

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

const iterator = generatorFunc();

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 }

제너레이터는 명령문으로 구현되므로 아래와 같이 조건문을 사용할수 있다.

function* generatorFunc(condition: boolean) {
  yield 1;

  if (condition) yield 2;

  yield 3;
}

const iterator = generatorFunc(false);

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

2-2. yield*

제너레이터 함수내에서 이터러블(iterable)을 순회하며 해당 이터러블이 제공하는 요소들을 순차적으로 반환하는 키워드

(iterable : 반복을 지원하는 객체)

function* generatorFunc() {
  yield 1;

  yield* [2, 3, 4];

  yield 5;
}

const iterator = generatorFunc();

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: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

아래와 같이 무한반복문을 활용하여, 프로세스나 브라우저의 지연이 없는 제너레이터 함수 작성이 가능하다.

function* generatorFunc() {
  let n = 1;
  while (true) {
    yield n++;
  }
}

const iterator = generatorFunc();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }

3. 응용

3-1. 제너레이터를 이용한 reverse 함수

제너레이터를 이용하여 역순회가 가능한 iterator를 반환하는 generator 함수를 구현해보자.

function* reverse<T>(arrayLike: ArrayLike<T>): IterableIterator<T> {
  let idx = arrayLike.length;

  while (idx) {
    yield arrayLike[--idx];
  }
}

const arr = [0, 1, 2, 3, 4];
const iter = reverse<number>(arr);

console.log(iter.next().value); // 4
console.log(iter.next().value); // 3
console.log(iter.next().value); // 2