[JS] 제너레이터 - 제너레이터 함수, 제너레이터 객체, 일시 중지와 재개

728x90

🎶 자바스크립트에서 사용되는 제너레이터 라는 개념에 대해 알아보자.

1. 제너레이터

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

제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.
제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.

2. 제너레이터 함수

// 제너레이터 함수 선언문
function* func(){
    yield 1;
}

// 제너레이터 메서드
const obj = {
    * method(){
        yield 1;
    }
};

참고로, 제너레이터 함수는 화살표 함수로 정의할 수 없고, new 연산자와 함께 생성자 함수로도 호출할 수 없다.

3. 제너레이터 객체

제너레이터 함수를 호출하면 일반 함수처럼 함수 코드 블록을 실행하는 것이 아니라 제너레이터 객체를 생성해 반환한다. 제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 동시에 이터레이터임에 유의하자.

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

const gene = func();

// 이터러블 확인
console.log(Symbol.iterator in gene); // true
// 이터레이터 확인
console.log('next' in gene); // true

참고로, 제너레이터 객체는 next 메서드 뿐만 아니라, 이터레이터에 없는 return, throw 메서드도 갖는다.

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

function* func(){
    try{
        yield 1;
        yield 2;
    } catch(e){
        console.error(e);
    }
}

const generator = func();

console.log(generator.next()); // {value: 1, done: false}
console.log(generator.next()); // {value: 2, done: false}
console.log(generator.throw('Error!')); // {value: undefined, done: true}

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

제너레이터는 yield 키워드와 next 메서드를 통해 실행을 일시 중지했다가 필요한 시점에 다시 재개할 수 있다. 이 때 yield 키워드는 제너레이터 함수의 실행을 일시 중지시키거나 yield 키워드 뒤에 오는 표현식의 평가 결과를 제너레이터 함수 호출자에게 반환한다.

즉, 제너레이터 객체의 next 메서드를 호출하면 yield 표현식까지 실행되고 일시 중지된다. 이때 함수의 제어권이 호출자로 야도된다. 물론 제너레이터 객체의 enxt 메서드는 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는데, value값은 yield된 값을, done값은 제너레이터 함수가 끝까지 실행됐는지를 나타내는 불리언 값이 할당된다.

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

function* func(){
    // 처음 next 메서드가 호출됐을 때, x에는 아무것도 할당 x
    // 두 번째 next 메서드가 호출되야 비로서 x에 값 결정됨.
    const x = yield 1;
    
    const y = yield 2+x;
    
    // 일반적으로 제너레이터 함수의 반환값은 의미가 없다.
    return x+y;
}

const gene = func(0);

console.log(gene.next()); // {value: 1, done: false}
// next 인수로 전달한 10이 x 변수에 할당됨
console.log(gene.next(10)); // {value: 12, done: false}
console.log(gene.next()); // {value: NaN, done: true}