ES6 제너레이터

무엇인지는 알겠는데 시원하게 이거다라고 단언 할 수 없는 느낌..

 

 

제너레이터 함수는 이터러블을 생성하는 함수이다.  

비동기 처리에 유용하게 사용됨

 

❓ 이터러블

이터러블 프로콜을 준수한 객체, 데이터 컬렉션의 순회를 가능하게 해준다. (for ~ of 문 순회, speard 연산자)

이터러블은 key Symbol.iterator를 값으로 이터레이터를 반환하는 메서드를 소유하고 있다.

 

❓ 이터레이터

next 메서드를 소유하고 호출 시 이터러블을 순회하며 반환값으로 value, done 프로퍼티를 가지고 있는 객체

value - 해당 차례에 반환할 값

done -  순회 종료 여부 (boolean)

📌 제너레이터 함수의 특징

• 일반적인 함수와 다르게 제너레이터 함수는 함수 호출 결과를 반환하는 것이 아니라 제너레이터 객체를 반환한다.
• 제너레이터 함수는 함수 실행을 일시 중지하고, 값을 반환한 다음 나중에 이어서 실행할 수 있다.

📌 제너레이터 함수 선언

• function 뒤에 *을 붙인다.
• 함수 내부에서 yield 키워드를 사용하여 함수의 실행을 일시 중지하고 값을 반환함
• genFunc은 제너레이터 객체로 이터러블이자 이터레이터 역할을 수행한다.
• 제너레이터 객체의 next 메서드를 호출하면 첫번째 yield에서 함수 실행을 중지하고 값을 반환한다.
• 이후 next 메서드 호출 시 함수 실행을 재개하고 다음번 yield에서 중지
• 모든 yield 키워드가 실행된 후 done 프로퍼티 값은 true가 된다.

function* genFunction () {
  console.log('하나');
  yield 1;

  console.log('둘');
  yield 2;

  console.log('셋');
  yield 3;
}

const genFunc = genFunction();

console.log(getFunc.next()); // 하나, {value: 1, done: false}
console.log(getFunc.next()); // 둘  , {value: 2, done: false}
console.log(getFunc.next()); // 셋  , {value: 3, done: false}
console.log(getFunc.next()); //       {value: undefined, done: true}

 

제너레이터 함수의 yield 키워드 사용으로 비동기 코드의 실행이 완료될 때까지 함수 실행을 일시 중지 할 수 있다는 것인데 함수의 실행 흐름을 직접 제어할 수 있다는게 메리트인듯 그래서 동기적 흐름으로 코드를 작성할 수 있게 되는것이고 . async/await가 같이 언급되는 것도 이해가 된다. 동작이 거의 유사하니 

 

참고

https://poiemaweb.com/es6-generator