제네레이터 함수

Generator function은 ES6에 추가된 문법 중 하나이다. 함수가 특정 지점에서 끝나고, 다음 번 실행시에는 그 끝난 지점에서 시작되는 신기한 녀석이다. iterator와 비슷하게 작동하는 함수라고 생각하면 이해가 편할 수 있다. 예제를 보자.

function* foo() {
	console.log(first);
	yield console.log(2);
	console.log(3);
	yield 4
	console.log(5)
	yield 666
}

이와 같이 Generator function은 'function*'로 정의 하며 내부에 yield라는 문법을 사용한다. 결과를 보고 이해해보자

눈여겨볼 포인트는 세 곳이다.

Generator function 은 next()를 통해 호출된다.

맨 처음에 'let a = function foo()' 는 함수의 호출이라기 보다는 iterator 형식으로 Generator 객체를 셋팅한 것으로 보면 된다. 실상 함수를 실행시키고 있는 것은 a.next()인 것이다.

Generator function 에서 yield는 경계의 의미를 갖는다!

a.next()들이 동작하는 것을 보면 yield가 등장하는 line까지 실행되고 동작을 중단하고, 다음 next()를 통해 중단된 yield 이후부터 다시 동작하는 것을 알 수 있다.

Generator 객체는 { value, done } 이라는 속성을 갖는다.

각 next()마다 { value: Any, done : Boolean }이 return 되는 것을 알 수 있는데 이는 Generator 객체가 가지는 속성이라고 할 수 있다. done은 더 이상 남은 yield가 없을 경우 true, 아니면 false를 호출해 Generator의 끝을 표현하며, value는 해당 next()에서의 yield 된 값이라고 볼 수 있다.

특이사항

아주 특이한 사용방식이 존재한다. 바로 함수를 호출하면서 역으로 함수로 값을 넣을 수 있다는 것이다.

function* foo() {
    console.log(yield) /*1번*/
    console.log(yield) /*2번*/
    console.log(yield) /*3번*/
}

let bar = foo();
bar.next(0)
bar.next(1)
bar.next(2)
bar.next(3)

다음의 호출 결과가 어떻게 나올까요?
바로 이렇게 나옵니다.
next를 통해서 넣은 1, 2, 3이 함수 내부로 들어가서 log가 찍히는 것을 볼 수 있다. 작동을 천천히 보면 bar.next(0)이 실행되었을 때는 '1번' 라인의 console.log 내부의 yield까지 딱! 실행하고 멈추게된다. 즉 console.log가 끝나지 않은 것이다. 그 이후 bar.next(1)이 실행될 때 1번 yield로 값을 실을 수 있어 console.log(1)이 실행이 되고, 또 두번째 라인의 console.log 내부의 yield에서 다시 동작이 멈추는 특이한 방식으로 작동한다.

즉 Generator function은 next()를 통해 호출되고, 정확히 yield 구문에서 함수 실행이 중단되며, 다음 next 때 그 이후에서 재개된다는 사실을 다시한번 기억하자.
값을 함수 안으로 넣어줄 수 있는 특이 케이스도 있다! 정도로 기억하면 될 것 같다.

마무리

이렇게 Generator function은 특이하게 iterator 와 비슷한 형태를 띄고 있으면서도 함수의 실행을 의도적으로 중단시키고, 재개시킬 수 있어 비동기 콜에서 함수들 끼리의 통신을 가능케 하는데 사용되기도 한다.