패스트캠퍼스 환급챌린지 26일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250726(토) 26일차

문법 - 생성기 함수

 

제너레이터

기존 함수는 호출하면 실행되고 return을 만나면 종료된다.

하지만 제너레이터 함수는 실행 중간에 멈추고(yield) 다시 재개(next) 할 수 있다

즉, 값을 여러 번 반환하면서도 종료되지 않을 수 있는 함수

function* generatorFunc() {
  yield 1;
  yield 2;
  yield 3;
}

 

클로저를 대체할 수 있을지

제너레이터의 개념을 설명하기 위해 먼저 클로저 기반의 상태 유지 함수를 배움

function makeEnergyGen() {
  let energy = 0;
  return function(boost = 0) {
    energy += boost || 1;
    return energy;
  };
}

이 함수는 호출할 때마다 상태를 유지하며 값을 증가시킨다.

function* energyGen() {
  let energy = 1;
  while (true) {
    const boost = yield energy;
    energy += boost || 1;
  }
}

제너레이터 버전은 

제너레이터가 무한 루프 안에서도 안전하게 동작하며 호출시점마다 상태를 유지하고 값을 내보낸다

클로저 없이도 이런 패턴이 가능하다

 

next, yield

제너레이터는 자신을 바로 실행하지 않고 대신 실행 제어권을 가진 이터레이터 객체를 반환하고

이 객체는 .next( )메소드를 가지고 있고 이걸 호출할 때마다 함수의 다음 yield 지점까지 실행된다

const gen = energyGen();
console.log(gen.next());      // { value: 1, done: false }
console.log(gen.next());      // { value: 2, done: false }
console.log(gen.next(5));     // { value: 7, done: false }

 

처음에는 낯선 문법 때문에 어렵게 느껴졌지만 강의를 따라하면서 동작을 확인하니 개념이 조금은 잡힌듯?

제너레이터는 함수의 패러다임 자체를 바꿔주는 존재