📌 제너레이터 함수

• 원하는 만큼 코드 실행을 시작하거나 중지할 수 있는 함수이다.
• Genarator 객체를 반환한다.

function* fruitList(){
    yield "Banana";
    yield "Apple";
    yield "Orange";
}

• function*을 사용하여 함수를 선언함.
• 반환할 값 앞에 yield 키워드를 사용함.
• 메서드
  • Generator.prototype.next()
  • Generator.prototype.return()
  • Generator.prototype.throw()

📌 제너레이터 실행하기

gen.next(value)
value: generator function에 전달할 값

• next() 메서드가 호출되면 제너레이터 함수가 yield 문을 만나기 전까지 실행된다.
• 또 다시 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행한다.
• value와 done 프로퍼티를 가진 객체를 반환한다.
  • value 프로퍼티는 yield문이 반환한 값(yielded value)을 갖는다.
  • done 프로퍼티는 모든 yield 문의 실행 여부를 나타내며 true 혹은 false 값을 갖는다.
  • done이 true일 경우 value는 undefined 값을 갖는다.
• next() 를 인자값과 함께 호출할 경우, 진행을 멈췄던 위치의 yield 문을 인자값으로 치환하고 그 위치에서 다시 실행하게 된다.

예시

function* fruitList(){
	yield "Banana";
    yield "Apple";
    yield "Orange";
}
const fruits = fruitList();

fruits.next();    // {value: "Banana", done: false}
fruits.next();    // {value: "Apple", done: false}
fruits.next();    // {value: "Orange", done: false}
fruits.next();    // {value: "undefined", done: true}

• 첫 번째 next() 메서드에 인자를 넣으면 무시됨.

function* gen() {
  while(true) {
    var value = yield null;
    console.log(value);
  }
}

var g = gen();
g.next(1);
// "{ value: null, done: false }"
g.next(2);
// "{ value: null, done: false }"
// 2

📌 제너레이터 종료하기

gen.return(value)
value: 반환될 값

• return() 메서드는 제너레이터를 종료한다.
• done: true를 반환하고 인자 값이 있다면 value에 그 값을 반환한다.

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

var g = gen();

g.next();        // { value: 1, done: false }
g.return("foo"); // { value: "foo", done: true }
g.next();        // { value: undefined, done: true }

• yield할 컨텐츠를 이미 다 반환하여 제너레이터 상태(done)가 true라면 객체의 value 프로퍼티 값은 계속 undefined이다.

function* gen() {yield 1};
var g = gen();
console.log(g.next());    //{ value: 1, done: false }
console.log(g.next());    //{ value: undefined, done: true }
console.log(g.return(1)); //{ value: undefined, done: true }

📌 제너레이터로 에러 생성

gen.throw(exception)

• Generator 함수에 error를 발생시키고 강제종료시킨다.
• {value: undefined, done: true} 반환
• Generator 함수의 catch()문에서 error를 받을 수 있음

function* gen(){
    try{
    	yield "Trying...";
        yield "Trying harder...";
        yield "Trying even harder...";
    }
    catch(err){
    	console.log("Error: " + err);
    }
}

const myGenrator = gen();
myGenerator.next();		// {value: "Trying...", done: false}
myGenerator.next();		// {value: "Trying harder...", done: false}
myGenerator.throw("opps");
// Error: opps
// {value: undefined, done: true}

📌 제너레이터와 프로미스 같이 사용하기

const myPromise= () => new Promise((resolve) =>{
    resolve("our value is...");
});

function* gen() {
    let result = "";
   yield myPromise().then(data => { result = data});
   yield result + ' 2';
};

const asyncFunc = gen();
const val1 = asyncFunc.next();
console.log(val1);		// {value: Promise, done: false}
val1.value.then(() => {
    console.log(asyncFunc.next());
});
// {value: "our value is ...2", done: false}

참고

• Generator - MDN Web Docs
• function* - MDN Web Docs