생성기 함수 (Generator function)

gyomni·2022년 1월 18일
0

JavaScript

목록 보기
10/14
post-thumbnail

기존의 함수 매커니즘은??

함수는 어떤 계산, 처리를 하는 코드의 묶음.
함수는 인자를 받을 수 있고, 인자 받은 값을 가지고 어떤 계산을 수행한 다음에 결과를 호출한 쪽에 반환해주는 역할!

Generator function는 기존의 함수 매커니즘을 더 확장한다!

코드의 묶음인 것, 인자를 받는 것, 값을 반환하는 것 같다! (안받을 수 도 있음 함수의 옵션사항이니까~!)

다른 점은!
다른 모든 함수는 값을 반환하면 함수가 되지만, Generator는 값을 반환하는데 함수가 종료되지 않기도 하고, 종료되기도 하는 이 상태를 선택할 수 있음.(이 자체가 옵션!)
-> 영원히 종료 안되게 디자인 가능! 몇반 반환 후 종료도 가능! 바로 값 반환하고 종료 가능!

>코드

// 호출 할 때마다 1씩 큰 값을 반환하는 함수
function makeInfiniteEnergyGenerator(){
  let energy = 0;
  return function (booster = 0){  // energy를 클로저 공간에 가두기 위해 함수 리턴
  if (booster){
    energy += booster;
  }else{
    energy++;
  }
    return energy;
  };
}

const energy = makeInfiniteEnergyGenerator();

for (let i =0; i < 5; i++){
  console.log(energy());
}
console.log(energy(5));

> 결과

1
2
3
4
5
10

위의 함수를 Generator함수를 이용해 작성해보면? 🧐

>코드

function* infiniteEnergyGenerator(){ // Generator함수는 function과 함수명 사이에 * 마킹!
  let energy =1;
  while(true){
    const booster = yield energy; // yield : Generator를 멈추는 키워드(종료x) 값을 호출자에게 돌려줌. (next의 반환값으로 energy값을 돌려줌.) 
  
    if (booster){
      energy+=booster;
    }else{
      energy++;
    }
  }
}

const energyGenerator = InfiniteEnergyGenerator();

for (let i =0; i < 5; i++){
  console.log(energyGenerator.next());  // next메소드 호출
}
console.log(energyGenerator.next(5));

// 다음 next 호출될 때까지 Generator함수 멈춰있음.

> 결과

{value:1, done: false}{value:2, done: false}{value:3, done: false}{value:4, done: false}{value:5, done: false}{value:10, done: false}

// done이 true가 될 때 : 제네레이터 안에서 어떤 상황에 리턴문을 만날 때.
// return을 하면 함수 종료하고 done 속성을 true로.

📍 Generator함수는 첫 번째 호출을 하면 일반 함수와 달리 자신을 실행시키지 않음.
-> 실행시키는데 필요한 도구를 갖고 있는 객체를 만들어서 넘겨줌.)
-> energyGenerator라고 하는 상수에 담긴 객체가 그 도구를 갖고 있는 객체임.
-> 객체 중에서 핵심적인건 next라는 메소드!
next : Generator함수 본체를 실행 재개시킬 수 있는 함수. (멈춰있다 실행, 멈춰있다 재개)

📍 기존에 실행하고 있던 상태를 모두 보존

📍 무한루프성 Generator가 아니라면 next를 하기 전에 마지막에 반환된 값의 done이 true인자 false인지 확인하고 true면 next호출 X, false면 next 호출 O 라고 판단하면 됨!

profile
Front-end developer 👩‍💻✍

0개의 댓글