본문 바로가기
Javascript

JS에서 제너레이터란 ?

yoonOcean 2022. 10. 29.

ES6 에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다.

일반 함수와의 차이는 다음과 같다.

1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.

  • 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 
  • 이는 함수 호출자 (caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없음을 의미한다.
  • 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다.
  • 다시 말해, 함수 호출자가 함수 실행을 일시 중지 시키거나 재개시킬 수 있다.
  • 이는 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도( yield ) 할수 있다는 것을 의미한다.

2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.

  • 일반 함수를 호출하면 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 일괄 실행하여 결과값을 함수 외부로 반환한다.
  • 즉, 함수가 실행되고 있는 동안에는 함수 외부에서 함수 내부로 값을 전달하여 함수의 상태를 변경할 수 없다.
  • 제너레이터 함수는 함수 호출자와 양방향으로 함수의 상태를 주고받을 수 있다.
  • 다시 말해, 제너레이터 함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로부터 상태를 전달받을 수도 있다.

3. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.

  • 일반 함수를 호출하면 함수 코드를 일괄 실행하고 값을 반환한다.
  • 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블 이면서 동시에 이터레이터인 제너레이터 객체를 반환한다.

제너레이터 함수의 정의

제너레이터 함수는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 표현식을 포함한다.


  

    
    
    
    
  
// 제너레이터 함수 선언문

function* genDecFunc() {

  yield 1;

}



// 제너레이터 함수 표현식

const getExpFunc = function* () {

  yield 1;

};



// 제너레이터 메서드

const obj = {

  *genObjMethod() {

    yield 1;

  },

};



// 제너레이터 클래스 메서드

class MyClass {

  *genClsMethod() {

    yield 1;

  }

}

* ( 애스터리스크) 의 위치는 function 키워드와 함수 이름 사이라면 어디든지 상관없다.

제너레이터 함수는 화살표 함수로 정의할 수 없다.

또한 new 생성자와 함께 생성자 함수로 호출할 수 없다.

제너레이터 객체

제너레이터 함수를 호출하면 일반 함수처럼 함수 코드 블록을 실행하는 것이 아니라 제너레이터 객체를 생성해 반환한다.

제너레이터 함수가 반환한 제너레이터 객체는 이터러블 이면서 동시에 이터레이터 이다.

다시 말해, 제너레이터 객체는 next 메서드를 가지는 이터레이터 이므로, 별도로 이터레이터를 생성할 필요가 없다.


  

    
    
    
    
  
function* genFunc() {

  yield 1;

  yield 2;

  yield 3;

}



// 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.

const generator = genFunc();



// 제너레이터 객체는 이터러블이면서 동시에 이터레이터다.

// 이터러블은 Symbol.iterator 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체다.

console.log(Symbol.iterator in generator); // true

console.log("next" in generator); // true

제너레이터 객체는 next 메서드를 갖는 이터레이터 이지만 이터레이터에는 없는 return, throw 메서드를 갖는다.

제너레이터 객체의 각 세 개의 메서드를 호출하면 다음과 같이 동작한다.

  • next() : 호출하면 제너레이터 함수의 yield 표현식까지 코드블록을 실행하고 yield 된 값을 value 프로퍼티 값으로, false 를 done 프로퍼티 값으로 갖는 이터레이터 result 객체를 반환한다.
  • return() : 호출하면 인수로 전달받은 값을 value 프로퍼티 값으로, true 를 done 프로퍼티 값으로 갖는 이터레이터 result 객체를 반환한다.
  • throw() : 호출하면 인수로 전달받은 에러를 발생시키고 undefined 를 value 프로퍼티 값으로, true 를 done 프로퍼티 값으로 갖는 이터레이터 result 객체를 반환한다.

  

    
    
    
    
  
function* genFunc_2() {

  try {

    yield 1;

    yield 2;

    yield 3;

  } catch (e) {

    console.error(e);

  }

}



const generator_2 = genFunc_2();



console.log(generator_2.next()); // {value : 1, done: false}

console.log(generator_2.return()); // {value : 2, done: true}



function* genFunc_3() {

  try {

    yield 1;

    yield 2;

    yield 3;

  } catch (error) {

    console.error(error);

  }

}



const generator_3 = genFunc_3();



console.log(generator_3.next()); // {value : 1, done: true}

console.log(generator_3.throw("err")); // {value : undefined, done: true}

제너레이터의 일시 중지와 재개

제너레이터는 yield 키워드와 next 메서드를 통해 실행을 일시 중지했다가 필요한 시점에 재개할수 있다.

일반 함수는 제어권을 함수가 독점하지만, 제너레이터는 함수 호출자에게 제어권을 양도하여 필요한 시점에 함수 실행을 재개할수 있다.

제너레이터 함수를 호출하면, 함수의 코드 블럭이 실행되는 것이 아닌 제너레이터 객체를 반환한다고 했다.

이터러블 - 이터레이터 인 제너레이터 객체는 next 메서드를 갖고, next 메서드를 호출하면 제너레이터 함수의 코드블록을 실행한다.

일반 함수처럼 한번에 실행되는것이 아닌, yield 표현식 까지만 실행한다.

yield 키워드는 제너레이터 함수의 실행을 일시 중지시키거나 yield 키워드 뒤에 오는 표현식의 평가 결과를 제너레이터 함수 호출자에게 반환한다.


  

    
    
    
    
  
function* genFunc_4() {

  yield 1;

  yield 2;

  yield 3;

}



// 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.

// 이터러블 - 이터레이터 인 제너레이터 객체는 next 메서드를 갖는다.

const generator_4 = genFunc_4();



// 처음 next 메서드를 호출하면 첫 번째 yield 표현식 까지 실행되고 일시 중지된다.

// next 메서드는 이터레이터 result 객체 ({value, done}) 를 반환한다.

console.log(generator_4.next()); // {value:1, done:false}



// 이런식으로 next 를 호출하다가, 마지막 값에 도달하면 {value: undefined, done: true} 가 반환된다.

제너레이터 객체의 next 메서드를 호출하면 yield 표현식까지 실행되고 일시중지 된다.

이때 함수의 제어권이 호출자로 양도 된다.

이후 필요한 시점에 호출자가 또 다시 next 메서드를 호출하면 일시 중지된 코드부터 실행을 재개 하고, 다음 yield 까지 실행되고 일시 중지 된다.

제너레이터 객체의 next 메서드는 일반적인 이터레이터 next 메서드의 동작과 비슷하고, 다른점은 next() 를 실행할때 마다 yield 문이 실행된다는 것이다.

이터레이터의 next 메서드와 달리 제너레이터 객체의 next 메서드는 인수를 전달할수 있다.

제너레이터 객체의 next 메서드에 전달한 인수는 제너레이터 함수의 yield 표현식을 할당받는 변수에 할당된다.


  

    
    
    
    
  
function* genFunc_5() {

  // 처음 next 메서드 호출시 첫번쨰 yield 식 까지 실행되고 일시 중지 된다.

  // 이 때 yield 된 값 1 은 result 객체의 value 로 할당된다.

  // 여기서 x 에는 1이 할당 되지 않는다.

  const x: number = yield 1;



  // 두번째 next 메서드 호출시 전달한 인수 10 은 첫번째 yield 를 할당 받은

  // x 에 할당된다. 즉, const x = yield 1; 은 두번째 next 호출시 완료된다.

  // 두 번째 next 호출시 두 번째 yield 까지 실행되고 일시 중지된다.

  // 따라서 yield x + 10 은 next 호출로 반환되는 result 객체의 value 로 반환된다.

  const y: number = yield x + 10;



  // 세번째 next 호출시 전달한 인수 20 은 두번째 yield 표현식을 할당받는 y 변수에 할당된다.

  // const y = yield (x+10) 은 세번째 next 메서드를 호출했을때 완료된다.

  // 일반적으로 제너레이터 반환값은 의미가 없다.

  // 따라서 제너레이터에서는 값을 반환할 필요가 없고 return 은 종료의 의미로 사용해야 한다.

  return x + y;

}



// 제너레이터 함수를 호출시 제너레이터 객체를 반환.

const gener_5 = genFunc_5();



// 처음 호출하는 next 메서드 에는 인수를 전달하더라도 무시된다.

// next 메서드가 반환한 이터레이터 result 객체의 value 프로퍼티에는 첫번째 yield 된 값 1 이 할당된다.

let res = gener_5.next();

console.log(res); // {value : 1, done: false}



// next 메서드에 인수로 전달한 10 은 함수의 x 변수에 할당된다.

// value 에는 두번째 yield 문을 실행한 20 이 할당된다.

res = gener_5.next(10);

console.log(res); // {value : 20, done: false}



res = gener_5.next(20);

console.log(res); // { value: 30, done: true }

이처럼 제너레이터 함수는 next 메서드와 yield 표현식을 통해 함수 호출자와 상태를 주고 받을 수 있다.

함수 호출자는 yield 표현식까지 함수를 실행시켜 제너레이터가 관리하는 상태를 꺼내올수 있고,

next 메서드에 인자를 전달해 제너레이터 객체에 상태를 밀어넣을수 있다.

이러한 특성을 이용해 비동기 처리를 동기처리처럼 구현할수 있다.

제너레이터의 활용

이터러블의 구현

제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간단히 이터러블 구현이 가능하다.

먼저 이터레이션 프로토콜로 무한 피보나치 수열을 생성해보자


  

    
    
    
    
  
const infiniteFibonacci = (function () {

  let [pre, cur] = [0, 1];



  return {

    [Symbol.iterator]() {

      return this;

    },

    next() {

      [pre, cur] = [cur, pre + cur];



      // 무한 이터러블 이므로 done 프로퍼티를 생략

      return { value: cur };

    },

  };

})();



// infiniteFibonacci 이 함수는 무한 이터러블 이다.



for (const num of infiniteFibonacci) {

  if (num > 10000) break;



  console.log(num); // 1 2 3 5 8 ..... 2584 4181 6765

}

이번에는 제너레이터를 사용하여 구현해보자.


  

    
    
    
    
  
const infiniteFibonacci = (function* () {

  let [pre, cur] = [0, 1];



  while (true) {

    [pre, cur] = [cur, pre + cur];

    yield cur;

  }

})();



// // infiniteFibonacci 이 함수는 무한 이터러블 이다.



for (const num of infiniteFibonacci) {

  if (num > 10000) break;



  console.log(num); // 1 2 3 5 8 ..... 2584 4181 6765

}

이터레이터와 next 메서드를 제너레이터 객체가 반환 하므로, return 문을 사용할 필요가 없이 cur 이 yield 되며 value, done 과 이터러블이 반환된다.

비동기 처리

제너레이터 함수는 next 메서드와 yield 표현식을 통해 함수 호출자와 함수의 상태를 주고받을수 있다.

이러한 특성을 활용하면 프로미스를 사용한 비동기 처리를 동기처리 처럼 구현할수 있다.

프로미스의 후속 처리 메서드 없이 동기처리 결과를 반환하도록 구현할수 있다.


  

    
    
    
    
  
const async = (generatorFn: () => Generator<any, void, unknown>) => {

  const generator: Generator<any, void, unknown> = generatorFn();



  const onResolved = (arg?: any) => {

    const result = generator.next(arg);



    return result.done

      ? result.value

      : result.value.then((res: any) => onResolved(res));

  };



  return onResolved;

};



function* fetchTodo(): Generator<any, void, any> {

  const url = "https://jsonplaceholder.typicode.com/todos/1";



  const response = yield fetch(url);



  const todo = yield response.json();

  console.log(todo);

}



async(fetchTodo)();

1. async 함수가 호출되면 인수로 전달받은 제너레이터 함수 fetchTodo 를 호출해 제너레이터 객체를 생성하고 onResolved 함수를 반환한다. onResolved 함수는 상위 스코프의 generator 변수를 기억하는 클로저다. async 함수가 반환한 onResolved 함수를 즉시 호출해 제너레이터 객체의 next 메서드를 처음 실행시킨다.

2. next 메서드가 처음 호출 되면 제너레이터 함수 fetchTodo 의 첫번째 yield 문 까지 실행된다. 이때 제너레이터 객체의 반환값은 { done : false, value : Promise } 가 된다. done 이 false 라면 value 의 프로미스가 resolved 일때 then 을 통해 결과값을 onResolved 함수에 다시 전달해 재귀한다.

3. onResolved 함수에 인수로 전달된 Response 객체를 next 메서드에 인수로 전달하며 제너레이터의 두번째 yield 문이 실행된다. next 에 전달한 인수는 제너레이터의 response 변수에 할당된다. 

4. 할당된 response 값의 json() 메서드를 실행시키고 위의 재귀 호출을 반복한다.

5. 모두 yield 되었으므로 fetchTodo 함수의 마지막까지 모두 실행되고 result 객체는 {done:false, value: response.json() 결과} 가 반환된다.

 

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

go() 와 curry() 를 사용하여 읽기 좋은 코드 만들기 - JS ES6+ 함수형 프로그래밍 - 20  (0) 2022.11.01
JS 에서 Set 객체의 사용  (0) 2022.10.30
JS 에서의 Symbol 의 사용과 응용  (0) 2022.09.30
JS 에서 Symbol 이란?  (0) 2022.09.29
reduce 를 이용한 함수 pipe() 를 구현해보자 - JS ES6+ 함수형 프로그래밍 - 19  (0) 2022.09.28

'Javascript' 관련글

티스토리툴바