[Deep JavaScript] 제네레이터

Dae-Hee·2022년 5월 1일
0

Deep JavaScript Study

목록 보기
10/12
post-thumbnail

Redux-Saga를 사용하기 위해서는 Generator를 필수로 알아야 하기 때문에 정리


Generator ?


  • Javascript ES6에서 도입

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

  • 이터러블? 자료를 반복할 수 있는 객체

  • 제너레이터 함수를 사용하면 간편하게 이터러블을 구현

  • 제너레이터 함수는 비동기 처리에 유용하게 사용


🛠 Example


function* test() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

const t = test();

console.log(t.next()); // { value: 1, done: false }
console.log(t.next()); // { value: 2, done: false }
console.log(t.next()); // { value: 3, done: false }
console.log(t.next()); // { value: 4, done: false }
console.log(t.next()); // { value: 5, done: false }
console.log(t.next()); // { value: undefined, done: true }
* yield : 
제너레이터를 멈추거나 다시 실행하는데 사용된다. 
yield는 표현식(expression)으로도 작성할 수도 있는데, 
표현식을 작성할 경우 왼쪽에 결과값을 할당한다.

* next :
이터레이터에서 활용된 next 를 제너레이터에서 동일한 개념으로 사용할 수 있다. 
한가지 달라진 점은 next를 통해 값을 제너레이터로 전달할 수 있다는 점이다.

function* returnTest() {
  const a = yield;
  const b = yield a;
  const c = yield b;
  return c;
}

const t = returnTest();

console.log(t.next()); // { value: undefined, done: false }
console.log(t.next(10)); // { value: 10, done: false }
console.log(t.return(30)); // { value: 30, done: true }
console.log(t.next(20)); // { value: undefined, done: true }

// 위에서 t.return(30) 대신 next를 사용 시 아래는 { value: 20, done: false }
* return : 
yield 문은 return을 사용하지 않으면 제너레이터를 끝내지 않는다. 
그 말은 return을 사용할 경우, 
yield 문이 남아있더라도 제너레이터를 종료하고 값을 반환한다는 뜻이다.

function* errorTest() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (e) {
    console.error(e);
  }
}

const t = errorTest();

console.log(t.next()); // { value: 1, done: false }
console.log(t.throw("Error!")); // Error!
console.log(t.next()); // { value: undefined, done: true }
console.log(t.next()); // { value: undefined, done: true }
* throw : 
throw는 return과 마찬가지로 실행 즉시 종료 시키며, 
다른 점은 Error를 발생시킨다는 점이다.
제너레이터를 사용할때 try...catch문으로 에러를 잘 핸들링 하는 것이 중요히다.

Reference

https://uzihoon.com/post/f27b7310-64e0-11ea-84dc-878832775ccf

0개의 댓글