[Javascript] - Generator

Generator (제너레이터)

 

- 자바스크립트는 ES6부터 제너레이터 기능을 도입했습니다.

 

// 제너레이터 기본적인 문법
function* counter() {
  console.info('counter 1');
  yield 1; // 첫번째 next 호출 시 여기까지 실행
  console.info('counter 2');
  yield 2; // 두번째 next 호출 시 여기까지 실행
  console.info('counter 3'); // 세번째 next 호출 시 여기까지 실행
}

const c = counter();

console.info(c.next());
// counter 1
// { value: 1, done: false }

console.info(c.next());
// counter 2
// { value: 2, done: false }

console.info(c.next());
// counter 3
// { value: undefined, done: true }

 

function 키워드 옆에 별표 (*) 하나를 붙임으로써 제너레이터를 만들 수 있습니다.

return 과 비슷한 yield 연산자가 있으며 기대한 값을 들고 있는 value 속성을 가진 객체를 만듭니다.

정리하자면 제너레이터는 '값을 가진 value 속성을 가진 객체를 반환하는 next 메서드를 가진 객체를 반환하는 함수' 를 만듭니다.

 

- 제너레이터는 약간 복잡한 실행 흐름을 갖고 있습니다.

 

문법이 어렵진 않지만, 제너레이터는 실행 흐름을 멈추거나 재개할 수 있어 실행 흐름이 복잡해집니다. (쉽고 예측 가능해야 하는 실행 흐름에서 거리가 멀어집니다.)

 

위 코드에서 본 것처럼 제너레이터는 이터러블 (Iterable) 을 생성하는 함수고 next 를 통해 값을 소비하기 때문에 제너레이터는 반복문을 사용하도록 조장합니다. 객체에서 함수로 옮겨가며 반복문의 사용도 줄어드는 추세에 맞지 않죠.

 

물론 이러한 제너레이터는 비동기 처리 시 유용하게 사용될 수 있고, react 와 react-native 에서 비동기 작업 처리 시 사용되는 미들웨어인 redux-saga 또한 제너레이터 문법을 사용합니다.

 

그러나 이러한 케이스를 제외하면 Promise, async-await 를 사용하는 것이 더 깔끔하기에 제너레이터를 사용할만한 부분이 많지 않고 굳이 써야 할 이유도 아직은 잘 모르겠습니다.

 

출처 : 자바스크립트는 왜 그모양일까?