제너레이터(generator)

제너레이터(generator)

Iterator를 생성함으로써 동기적으로 비동기 가능

제너레이터(generator)는 Iterator를 사용해 자신의 실행을 제어하는 함수

일반적인 함수는 매개변수를 받고 값을 반환하는데 함수를 호출하면 그 함수가 종료될 때까지 제어권이 없음

그러나 제너레이터(generator)를 사용하면 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있음

 

 

제너레이터 함수

제너레이터를 만드는 '제너레이터 함수’라 불리는 특별한 문법 구조가 있음

바로 function*

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

제너레이터 함수는 일반 함수와 동작 방식이 다름

제너레이터 함수를 호출하면 코드가 실행되지 않고, 대신 실행을 처리하는 특별 객체, '제너레이터 객체’가 반환됨

 

예제 👇

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

// '제너레이터 함수'는 '제너레이터 객체'를 생성
let generator = generateSequence();
alert(generator); // [object Generator]

함수의 본문 코드는 아직 실행되지 X

 

 

generator.next();

next()는 제너레이터의 주요 메서드임

next()를 호출하면 가장 가까운 yield <value>문을 만날 때까지 실행이 지속(value를 생략할 수도 있는데, 이 경우엔 undefined가 됨)

이후, yield <value>문을 만나면 실행이 멈추고 반환하고자 하는 값인 value가 바깥 코드에 반환됨

 

next()는 항상 아래 두 프로퍼티를 가진 객체를 반환함

✔ value: 산출 값

✔ done: 함수 코드 실행이 끝났으면 true, 아니라면 false

 

실행 예제 👇

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

// 첫 번째 산출 값을 받는 예시
let one = generator.next();
alert(JSON.stringify(one)); // {value: 1, done: false}

// 두 번째 산출 값을 받는 예시
let two = generator.next();
alert(JSON.stringify(two)); // {value: 2, done: false}

// generator.next()를 또 호출하면 실행은 return문에 다다르고 함수가 종료
let three = generator.next();
alert(JSON.stringify(three)); // {value: 3, done: true}

제너레이터가 종료됨

마지막 결과인 value:3과 done:true를 통해 이를 확인할 수 있음

 

 

💥 제너레이터가 반환하는 값을 사용하려 할때는 yield를 써야하고, return은 제너레이터를 중간에 종료하는 목적으로만 사용하는 것이 좋음

👉 제너레이터에 return을 쓸 때는 반환값을 쓰지 않는 것이 좋음