[JavaScript] generator

Generator 함수, Generator

Generator 함수는 일반 함수와는 달리 function의 우측에 *를 표시하여 정의한 함수이다. Generator 함수에는 두 가지 특성이 있다.

 

1. 함수를 호출하면 iterator를 반환한다. 이때 반환하는 iterator를 generator라고 부른다.
2. 함수 내부 코드가 함수를 호출할 때 실행되지 않는다. 대신 generator의 next 메서드를 호출할 때 실행되며 함수 내부의 yield 키워드에 도달할 때까지 실행된다.

단순한 예제를 작성하면 다음과 같다.

 

counterGen이라는 함수를 호출하면 iterator를 반환한다. 반환된 iterator는 generator 함수에서 yield 키워드에 도달할 때까지 코드를 실행하고 yield 키워드와 같이 위치한 변수를 value에 할당한다.

 

Iterator의 의미를 모르겠다면 iterator에 관해 설명한 이전 글을 참고하길 바란다.

https://jongbeom-dev.tistory.com/139

[JavaScript] iterable, iterator

 

Generator 함수의 활용 1

Generator 함수를 이용하면 iterator 객체를 생성하기가 쉽다. Symbol.iterator 속성과 next 메서드를 직접 정의하지 않아도 되기 때문이다. 위의 예제를 사용해서 Generator 함수를 사용하지 않고 iterator 객체를 생성하는 방법과 비교를 해보았다.

 

첫 번째 방법과 두 번째 방법 모두 동일한 iterator 객체를 생성했지만 두 번째 방법의 코드가 더 복잡하다. 따라서 Generator 함수를 이용해서 iterator 객체를 생성하는 방법이 더 유리하다.

 

Generator 함수의 활용 2

Generator 함수를 이용해서 생성한 iterator 객체에서 next 메서드를 호출하면 yield 키워드에 도달할 때까지만 코드가 실행된다. 이는 일반적인 함수의 현상과 다르다. 일반적으로 함수를 호출하면 그 함수를 제어하는 주체는 해당 함수가 된다. 하지만 generator 함수는 yield 키워드에 도달하기 전까지는 해당 함수가 그 함수를 제어하고 yield 키워드에 도달하면 iterator 객체가 함수를 제어하게 된다.

 

이는 여러 비동기 함수를 순차적으로 호출하고 싶을 때 async, await을 사용하는 방식과 매우 유사하다. async 함수 안에서 promise를 반환하는 비동기 함수를 호출할 때 await 키워드를 앞에 작성하면 비동기 함수가 끝날 때까지 await 키워드 다음의 코드는 실행되지 않는다. 이를 generator 함수를 이용해서도 구현할 수 있는데 현재는 async, await를 사용하는 편이 간결하여 generator 함수를 이용하여 구현하진 않는다.

 

Generator 함수를 이용하여 비동기 함수를 순차적으로 호출하는 예제를 작성해보았다.

 

1초 후에 문자열을 출력하는 비동기 함수를 next 메서드를 호출하며 순차적으로 실행하였다. async, await을 사용하는 방식과 비교해보자.

 

gen 함수와 func 함수의 구조가 매우 유사하다. 물론 func 안에서 사용하는 비동기 함수는 반드시 promise를 반환하는 비동기 함수여야 한다는 차이는 존재한다.

 

참고자료

https://www.hanbit.co.kr/store/books/look.php?p_code=B2328850940

러닝 자바스크립트

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

Iterators and generators