제너레이터란?
코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수.
특징
함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
- 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드가 실행됩니다. 함수를 호출한 이후 함수 실행을 제어할 수 없습니다.
제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.
- 일반 함수는 실행되면 함수 외부로 결과값을 반환하지만 제너레이터 함수는 중간에 실행을 멈추고 중간 상태를 전달할 수 있습니다.
// 제너레이터 함수
const func2 = (a, b) => {
yield a + b;
yield 5;
return 7;
}
func2()
// 제너레이터 호출 ⬇️
- 제너레이터는 next 메서드를 소유하는 이터레이터입니다. next메서드를 호출하면 다음 상태(yield)까지 실행하고 상태값을 보여줍니다.
제이너레이터 함수를 호출하면 제너레이터 객체를 반환한다.
- 일반 함수를 호출하면 함수가 실행되고 값을 반환하지만 제너레이터 함수를 호출하면 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환합니다.
// 일반 함수
const func = (a, b) => {
return a + b;
}
// 일반함수 호출 ⬇️
// 제너레이터 함수
const func2 = (a, b) => {
yield a + b;
yield 5;
return 7;
}
func2()
// 제너레이터 호출 ⬇️
제너레이터와 이터레이터의 차이점?
- 둘 다 next 메서드를 가지지만 제너레이터는 이터레이터에게 없는 return, throw 메서드를 갖고 있습니다.
// 제너레이터 함수
const func2 = (a, b) => {
try {
yield a + b;
yield 5;
return 7;
} catch (e) {
console.error(e);
}
}
console.log(func2(1, 2).next()); // { value: 3, done: false }
console.log(func2.return("end")); // { value: "end", done: true }- 에러가 발생하면 인수로 전달받은 에러를 발생시키고 value는 undefined, done은 true값으로 반환합니다.
이터레이터면 이터러블이란 말인가?
- 네 맞다고 볼수 있습니다. 이터러블이란 반복 가능한 객체(배열)인데 제너레이터도 반복이 가능하기 때문입니다.
import func2
const arr = func2(1, 2);
for (let num of arr) {
console.log(num);
}
// 3
// 5후기
코드 작성하다보면 순서대로 실행하고 싶은데 자바스크립트 특성상 비동기식으로 작동하기 때문에 일부러 잡아줘야 하는 경우가 생깁니다. 대표적으로 async/await이랑 Promise가 있는데 이 두개의 밑바탕이 되는 제너레이터를 배워야 좀 더 이해가 수월할 것 같아서 알아봤습니다. 좀 더 나은 이해를 돕기위해 이터러블과 이터레이터를 심층적으로 알아봐야 겠습니다.
