🤿 (4) Generator 함수란?

이전 글 “(3) 브라우저 렌더링 과정 탐구 - HTML 파서”에서

html 문자열을 하나씩 순차적으로 확인하기 위해 Generator 함수를 사용하게 되었다.

Generator 함수에 대해 알아보자!

Generator 함수란?

ES6에서 도입된 함수로 MDN 문서에 따르면 “빠져나갔다가 나중에 다시 돌아올 수 있는 함수”라고 표현한다.

일반함수와의 차이점은 일반함수처럼 함수 호출 시 바로 코드가 실행되는 것이 아닌, 대신 실행을 처리하는 Iterator 객체가 반환된다는 점이다.

풀어 설명하자면 함수 실행 중에 중간에 일시정지(pause)하고 동작을 재개(resume)할 수 있는 함수이다.

이를 가능하게 하는 것이 yield 키워드이며, yield 키워드를 사용한 함수는 Iterable 객체를 반환한다.

Iterator란?

ES6에 도입된 표현법(protocol)이다.

for...of 구문에서 어떤 value들을 반복하여 사용할 수 있는 객체를 의미하며,

String, Array, TypedArray, Map, Set 는 모두 내장 iterable 이다.

사용자가 정의하여 만들 수 있으며, yield 키워드를 사용하면 된다.

Generator 함수 구조

구조는 일반 함수를 작성하는 방법과 비슷하며 *을 붙여준다는 점에서 다르다.

function* name([param, [, param, [, ...param]]]) {
	statements
}

• name: 함수명
• param: 함수에 전달되는 인수의 이름.
• statements 함수의 본체를 구성하는 구문

function* generator(i) {
  yield i;
  yield i + 10;
}

const gen = generator(10);

console.log(gen.next().value);
// Expected output: 10

console.log(gen.next().value);
// Expected output: 20

• yield 키워드를 통해 함수 내에서 순차적으로 실행될 구문을 작성하고,
• next() 를 호출하면 진행이 멈췄던 위치에서부터 재실행된다.
  • next()는 항상 아래 두 프로퍼티를 가진 객체를 반환한다.
    • value: 산출 값
    • done: 함수 코드 실행이 끝났으면 true, 아니라면 false

이터레이터는 for...of 구문을 통해 값을 얻을 수도 있다.

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

for(let value of generator) {
  alert(value); // 1, 2가 출력됨
}

• 주의점: for...of 구문을 통해 값을 얻을 경우 done: false인 value만 출력되므로 return되는 값은 출력되지 않는다.
  • 모든 값을 출력하고 싶으면 예시 속 return을 yield 키워드로 바꾸면 된다.

Generator 안의 Generator

Generator 안의 Generator를 제너레이터 컴포지션(Generator Composition)이라고 한다.

이때 yield* 문법이 사용된다. Generator 함수 안에서 Generator 함수를 호출할 때 yield*를 사용하면 되는 것이다.

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

function* generatePasswordCodes() {
  // 0..9
  yield* generateSequence(48, 57);

  // A..Z
  yield* generateSequence(65, 90);

  // a..z
  yield* generateSequence(97, 122);

}

let str = '';

for(let code of generatePasswordCodes()) {
  str += String.fromCharCode(code);
}

Generator 함수에서 next() 인자값이 주어진다면?

next() 인자값을 넣는다면 Generator 안으로 값을 전달하는데, 예시는 다음과 같다.

function* gen() {
  let ask1 = yield "2 + 2 = ?";

  alert(ask1); // 4

  let ask2 = yield "3 * 3 = ?"

  alert(ask2); // 9
}

let generator = gen();

alert( generator.next().value ); // "2 + 2 = ?"

alert( generator.next(4).value ); // "3 * 3 = ?"

alert( generator.next(9).done );

출처: JAVASCRIPT INFO - 제너레이터

출처

MDN 문서- function*
JAVASCRIPT INFO - 제너레이터