javascript generator함수와 yield, next()에 대해

generator 개념

제네레이터 함수는 일반함수와 같이 함수의 코드블록을 한 번에 실행하지 않고 함수 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 특수한 함수입니다.

즉, return 값이 iterable한 값이라는 특징이 있습니다.

사용방법과 예시

generator 함수는 일시 중지했다가 필요한 시점에 재시작하는 특징을 이용하여 비동기 처리에 유용하게 사용되었으나 es2017에 async/await를 이용한 비동기처리 처리 패턴의 등장으로 존재감이 낮아지고 있다.
generator 함수 내에 yield 키워드는 제네레이터 함수를 중지하는데 외부에서의 next()를 통한 호출은 제개하는데 사용됩니다.

function* foo(){
  var index = 0;
  while (index <= 2) // when index reaches 3,
                     // yield's done will be true
                     // and its value will be undefined;
    yield index++;
}

var iterator = foo();
console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

이와같은 예를 통하여 알 수 있듯이 return 값은 객체이며 value값은 yield 이후에 오는 값, done은 boolean으로 iterable한 return값의 끝을 알려주고 있습니다.

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

let generator = generateSequence();

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

-> 위와같이 iterable하게 for문 활용이 가능합니다.

• yield와 next()함수는 데이터를 서로 주고받는게 가능하기 때문에 더 넓은 응용이 가능하다.

function *myGen() {
    const x = yield 'hello'; // x= helloworld
    const y = yield (x + 1); // x+1==helloworld1
    const z = yield (y + 2); // z = 30
    return y + z; 
}

const myitr = myGen();
let res = myitr.next()
console.log(res);   // {value:hello, done:false}
console.log(myitr.next(res.value+'world')); // {value:helloworld1, done:false}
console.log(myitr.next(20)); // {value:22, done:false}
console.log(myitr.next(30)); // {value:50, done:true}