[ES6 JavaScript] Generator

 오늘은 Generator에 대해 공부해보도록하겠습니다. Generator 객체는 Generator function으로부터 반환된 값입니다. Generator function이 무엇인지 먼저 살펴보도록 하겠습니다.

 

Pixabay로부터 입수된 OpenClipart-Vectors님의 이미지 입니다.  

 

Generator function은 아래와 같이 function 옆에 *(asterisk)를 붙여 정의 합니다. 이 함수는 Generator를 반환합니다.

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

 위 예제를 보면 generator라는 Generator Funtion이 선언되어 있습니다. 밑에서 generator(10);으로 Generator Function을 호출하는데, 이때 Generator Function의 내부가 실행되는 것이 아니라 Generator 객체를 반환합니다. 즉, 위 예제에서는 const gen = generator(10); 의 실행으로 gen에 Generator 객체가 반환된 것입니다.

 

 반환된 Generator 객체는 next() 메서드를 통해 yield된 값을 반환할 수 있습니다.

function* idMaker(){
    var index = 0;
    while(true)
        yield index++;
}

var gen = idMaker(); // "Generator { }"

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// ...

console.log(gen.return());
/*
  {
    done: true,
    value: undefined
  }
*/
console.log(gen.next().value); // undefined

 위 예제에서는 idMaker 라는 Generator Function을 선언했습니다. 그리고 밑에서 idMaker() 호출을 통해 gen에 Generator 객체를 저장했습니다. 그리고 gen.next().value를 반복하며 값을 출력하고 있습니다. idMaker의 함수 내부가 실행되며 yield된 값을 지속적으로 반환하는 것을 확인할 수 있습니다.

 위 예제에서 idMaker는 무한으로 반복이 가능합니다. 이를 중단하기 위해 Generator.prototype.return() 메서드를 사용할 수 있습니다. return() 메서드를 사용하면 그 순간 Generator 객체의 done 속성은 true가 되고 그 이후에 value는 undefined가 반환됩니다.

 

 

 

참고: developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator

Generator

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function*

function*