[Javascript] Generator Function

종종 javascript 를 보다보면 function* 처럼 function 뒤에 * 가 붙는 경우와 yield 를 사용하는 경우를 보았는데, 잘 이해를 못하다가.. 오늘 제대로 한번 파악을 해보았습니다.

이름하여 Generator Function..!!

선언

generator 함수는 function* 와 같은 형태로 선언을 할 수 있습니다.
generator은 const gen = generator(); 형태로 인스턴스화 할 수 있습니다.
generator 함수는 next() 호출 시 yield가 선언된 순서대로 값을 반환 해줍니다.
아래 예시를 보면, yield 1/2/3 순서대로 3번 선언이 되어 있고,
next() 함수를 통해서 3번 실행을 해주면, 1, 2, 3 값이 반환이 됩니다.
next() 를 한번 실행 해주면, 첫번째 yield를 만날 때 까지만 실행이 되고, 그 아래 코드는 실행이 되지 않고 멈추어 있게 됩니다.

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

const gen = generator(); // "Generator { }"

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

무한 Generator

이를 활용하면 아래와 같이 계속해서 1씩 커지는 값을 반환하는 제너레이터를 만들 수도 있습니다.

function* infinite() {
  let index = 0;

  while (true) {
    yield index++;
  }
}

const generator = infinite(); // "Generator { }"

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

Generator Methods

next() : yield로 선언된 다음 값을 불러 옵니다.
return() : 전달 해준 값을 반환하고 generator를 종료시킵니다.
throw() : exception 처리를 합니다.

List와 함께 next() 사용하는 예제

function* getPage(pageSize = 1, list) {
    let output = [];
    let index = 0;

    while (index < list.length) {
        output = [];
        for (let i = index; i < index + pageSize; i++) {
            if (list[i]) {
                output.push(list[i]);
            }
        }

        yield output;
        index += pageSize;
    }
}

list = [1, 2, 3, 4, 5, 6, 7, 8]
let page = getPage(3, list);              // Generator { }

page.next();                              // Object {value: (3) [1, 2, 3], done: false}
page.next();                              // Object {value: (3) [4, 5, 6], done: false}
page.next();                              // Object {value: (2) [7, 8], done: false}
page.next();                              // Object {value: undefined, done: true}

실제로 javascript를 코딩하면서 사용 하게 되는 경우는 많지 않을 것 같지만, 가끔 예제코드에서 보이는 경우에 참고하면 좋을 것 같습니다.

참조 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator