<aside> 🍦 Generator에 대해서 공부하면서 기록합니다.

</aside>

Generator

Redux-Saga 패키지를 공부하는 중에 반드시 알아야 하는 Generator 개념이 있어서 공부하고 기록한다. 비교적 최신 문법이라 막 접하게 된 내용이다. 생소하지만 Redux-Saga를 정말 잘 사용하고 싶어서 따로 공부한다.

<aside> 💡 본격적인 generator 객체와 generator function 을 알아보기에 앞서서 iterator, iterable의 개념을 정리한다.

</aside>

반복자(iterator)의 조건을 가진 객체

• next 라고 하는 메서드를 가지고 있다.
• next 메서드는 value와 done 속성값을 가진 객체를 반환한다.
• done 속성값은 작업이 끝났을 경우 (예를 들어 function에서 리턴을 만났을 때) true 값을 가진다.

반복 가능한(iterable) 객체의 조건

• Symbol.iterator의 속성값으로 함수를 가지고 있다.
• 해당 함수를 호출하면 반복자(iterator) 객체를 반환한다.

갑자기 왜 iterable한 객체와 iterator라고 하는 객체 생성 조건을 먼저 공부했는가 하면, generator가 iterator 이면서 iterable 한 속성을 지녔기 때문이다. 어렵다. 바로 코드를 확인하자.

function* f1() {
  console.log("f1-1");
  yield 10; 
  console.log("f1-2");
  yield 20; 
  console.log("f1-3");
  return "finished";
}

const gen1 = f1();

위의 함수 정의에서 * 기호가 들어간 것이 보인다. function으로 함수를 정의할 때 *를 붙이면 generator function을 정의한다는 의미이다.

• generator function이 위에서 처럼 호출되면 { generator object } 가 반환된다.
• f1 라고 정의된 generator function은 최종적으로 리턴문을 만나기 전까지 next() 메서드를 통해서 yield에 반영된 값을 value로 가지는 객체를 만든다.

console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

/*
 
f1-1
{ value: 10, done: false }

f1-2
{ value: 20, done: false }

f1-3
{ value: 'finished', done: true }

*/

• 최종적으로 모든 yield 값이 소모가 되는 첫 시점, 즉 작업이 모두 종료된 경우, 제너레이터 객체의 done 속성값은 true를 가지게 된다.