자바스크립트 generator 함수란?

• 제네레이터 함수는 ES6부터 지원되는 자바스크립트의 기능이다.
• 제네레이터 함수를 사용하면, 실행한 함수를 중간에 중단(pause)한 뒤 다시 재개(resumed)할 수 있다.
• 제네레이터 함수가 사용되는 대표적인 예로는 redux saga가 있다.
• 중간 중간에 중단점이 있음으로써, 디버깅에 큰 도움이 된다.

const generator = function* () {
  console.log("1st");
  yield;
  console.log("2nd");
  yield;
  console.log("3rd");
  yield 3;
};

generator

• genetator 함수는 위와같이 function*() {} 의 형태로 작성할 수 있다.
• 기존의 함수 선언식에 *을 붙여준 모양새이다.
• yield는 단순히 표현하면 중단점으로, 함수가 실행될 때 마다 멈추는 지점을 의미한다.

const fnGen = generator();

fnGen.next();

• 선언된 제네레이터 함수는 바로 사용할 수는 없고, 실행하여 변수에 할당한 뒤 next() 메서드를 통해 실행한다.
• next 메서드를 통해 위의 제네레이터 함수를 처음 실행하면 1st가 콘솔에 찍힌다.

const a = fnGen.next();
const b = fnGen.next();

• 그 다음에 두 번 더 next 메서드를 실행할 수 있는데, 이번엔 리턴값을 받아본다.
• a 변수가 선언된 행이 실행되었을 때, 2nd가 콘솔에 출력되고 변수 a에는 {value: undefined, done: false} 값이 담긴다.
• 그 다음 b 변수가 선언된 행이 실행되면, 3rd가 콘솔에 출력되고 변수 b에는 {value: 3, done: false} 가 할당된다.
• yield는 return 처럼 값을 넘겨줄 수 있으며, 넘겨준 값은 객체 내부에 value에 담겨진다.

const fin = fnGen.next();

• 마지막으로 한 번더 next 메서드를 실행하면, 이미 모든 코드는 실행이 완료되었지만 오류 없이 값을 반환한다.
• {value: undefined, done: true} 라는 값이 fin에 담기는데, 지금까지와는 다르게 done 프로퍼티의 값이 true로 제네레이터 함수의 실행이 끝났음을 알린다.
• 제네레이터 함수 내부에 while문을 사용하여 영원히 끝나지 않는 제네레이터 함수를 만들 수도 있다.

let count = 0;
const generator = function* () {
  while (true) {
    yield count++;
  }
};
const fnGen = generator();

• 위의 제네레이터 함수는 아무리 next해도 done이 true가 되지 않는다.
• 또한, 실행할 때 마다 count의 값이 1씩 증가함을 알 수 있다.

redux saga에서는 fork나 call로 제네레이터 함수를 실행할 수 있다. (fork는 동기 함수, call은 비동기 함수)

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator

Generator - JavaScript | MDN