22. generator

1. Generator

함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능

2. 사용법

function* fn(){
  console.log(1)
  yield 1
  console.log(2)
  yield 2
  console.log(3)
  console.log(4)
  yield 3
  return "finish"
}

const a = fn()

function 옆에 *을 붙혀서 사용함

내부에 yield 키워드를 사용하고 yield에서 함수를 멈출 수 있음

a를 호출하면 반환값이 없음

가. .next()를 이용해서 가장 가까운 yield까지 호출할 수 있다.

value랑 done property를 가짐
value는 yield 오른쪽의 값을 의미하며 done은 함수코드가 끝났는지 여부를 확인한다.
실행이 끝났으면 true 아니면 false가 뜸

계속 실행해 보면 함수가 종료될때까지 실행되며 함수가 종료된 순간 done은 true를 반환한다.

나. .return()을 이용해서 즉시 종료시킬 수 있다.

return()에 의해서 종료가 되면 next를 실행해도 호출할 수 없다.

다. throw()를 이용해서 예외처리를 할 수 있다.

기존 함수에서 try catch문으로 감싸고

throw()를 이용해서 에러를 호출하면 catch문이 실행이 되며 에러 처리가 된다.

3. Generator의 특징

가. Generator는 iterable(반복가능)이다.

전제조건으로 Symbol.iterator메서드가 있어야 하며 Symbol.iterator는 iterator를 반환해야 한다.

iterator는 next메서드를 가지며 next 메서드는 value와 done 속성을 가진 객체를 반환해야 하고 작업이 끝나면 done은 true가 된다.

for of 를 이용해서 반복을 하면서 next의 done property가 true가 될 때까지 반복된다.

참고 배열, 문자열 모두 iterable임

4. next()에 인수 전달하기

yield를 변수에 저장하고 a.next()를 실행하고 다음에 a.next(2)를 실행하게 되면 2가 num1으로 할당이 됨, 이후 a.next(4)를 실하면 4는 num2로 할당이 되고 리턴에 num1 + num2인 6이 반환이 된다.

5. Generator는 값을 미리 만들어두지 않는다.

while로 무한반복문을 만들어도 브라우저가 멈추지 않는다.

필요한 값만 그때그때 생성됨

6. yield*을 이용해서 다른 generator 함수를 호출하기

yield* 오른쪽에는 반복가능한 모든 것이 올 수 있다.

정리

generator는 다른 작업을 하다가 다시 돌아와서 next() 해주면 진행이 멈췄던 부분 부터 이어서 실행할 수 있다.

Redux saga에서 많이 쓰인다고 한다.