[Javascript] Generator (제네레이터)

📍 Intro

지난 글에서 다루었던 Iterator 와 인접하게 사용되는 개념 중 하나가 바로 generator (제네레이터) 이다. 제네레이터는 ES6에서 도입되어, 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다. 이번 글에서는 generator funciton 과 generator의 활용 방법을 살펴보고자 한다. 

 

 

✨  Generator

MDN 에서 정의하는 generator 는 "generator function (제네레이터 함수) 로부터 반환된 값이며 iterable, iterator protocol 을 준수하는 값" 이다. 위의 정의에서 표기된 Generator function 의 주요 특징은 다음과 같다.

 

1. 함수 호출자 (caller) 에게 함수 실행의 제어권을 양도(yield)할 수 있다.

일반 함수는 호출 시 제어권이 함수에게 넘어가기 때문에 코드가 일괄 실행되며, 호출자는 실행을 제어할 수 없다. 하지만 generator function 은 호출자가 함수 실행을 일시 중지하거나 재개시킬 수 있다. 이를 함수의 제어권을 양도 (yield) 한다고 표현한다. 

 

2. 함수 호출자와 함수의 상태를 주고받을 수 있다.

일반 함수는 호출 시 매개변수를 통해 외부에서 값을 주입받고, 일괄 실행하여 결과값을 반환한다. 하지만 generator function 은 호출자에게 상태를 전달하고, 전달받을 수 있다.

 

3. 호출 시 generator 를 반환한다.

generator 함수 호출 시 일반적인 값을 반환하는 것이 아니라 iterable 이면서 동시에 iterator 인 generator 객체를 반환한다.

 

💡  Recap: 복습 포인트

Iterable 은 다음과 같은 특징을 갖는다.
1. Symbol.iterator 를 프로퍼티 키로 사용한 메서드를 구현한다
2. Symbol.iterator 를 프로토타입 체인을 통해 상속받는다 

Iterator 는 다음과 같은 특징을 갖는다. 
3. next 메서드 소유
4. next 메서드의 결과 객체에 done, value 프로퍼티를 소유

따라서 generator 객체 역시 Symbol.iterator 를 상속받으며 value, done 프로퍼티와 next 메서드를 소유한다. 하지만 중요한 점은, generator 는 iterator 에는 없는 📍 return, throw 메서드를 갖는다는 것이다. 

 

위의 세 가지 특징을 더욱 잘 이해하기 위해서는 generator function의 선언 방법과 구성을 살펴보아야 한다. 우선, function* 키워드로 함수를 선언하고 내부에 yield 표현식을 포함하면  generator function 이 된다. 메서드로 선언할 때는 * 표시만 해 주면 된다. 

// Generator functions

function* genFunc() {
	yield 1;
}

const obj = {
	* genFunc() {
    	yield 1;
    }
}

class Test {
	* genFunc() {
    	yield 1;
    }
}

// Check for methods
console.log('next' in genFunc()) // true
console.log('throw' in genFunc()) // true

 

❗ 화살표 함수로는 generator function 을 정의할 수 없다.

❗ new 연산자와 함께 생성자 함수로 호출할 수 없다. 

 

✨  Generator 의 동작 방식

앞서 언급했든 generator 에는 next 메서드와 더불어 고유한 yield 표현식과 throw, return 메서드를 갖는다. 예제를 통해서 쉽게 generator 의 작동 방식을 확인할 수 있다. 

 

// iterator 에서는 done 의 조건에 부합하는 순간 true 로 전환된다. 

const iterFunc = {
    [Symbol.iterator]() {
        let cur = 1;
        const max = 5;
        return {
            next() {
                return {value: cur++, done: cur > max + 1}
            }
        }
    }
}

const test = iterFunc[Symbol.iterator]()
console.log(test.next()) // {value: 1, done: false}
console.log(test.next()) // {value: 2, done: false}
console.log(test.next()) // {value: 3, done: false}
console.log(test.next()) // {value: 4, done: false}
console.log(test.next()) // {value: 5, done: false}
console.log(test.next()) // {value: 6, done: true}
console.log(test.next()) // {value: 7, done: true}
console.log(test.next()) // {value: 8, done: true}



// generator 에서는 마지막 yield 값까지 반환한 뒤에야 done 상태를 true 로 전환한다. 

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

const gen = genFunc();
console.log(gen.next()) // {value: 1, done: false}
console.log(gen.next()) // {value: 2, done: false}
console.log(gen.next()) // {value: 3, done: false}
console.log(gen.next()) // {value: undefined, done: true}
console.log(gen.next()) // {value: undefined, done: true}
console.log(gen.next()) // {value: undefined, done: true}



// generator 의 return 메서드를 호출하면 전달받은 값을 value 값으로, true 를 done 값으로 갖는 iterator result object (이터레이터 리절트 객체) 를 반환한다.

console.log(gen.return('Ha')) // {value: 'Ha', done: true}



// throw 를 사용하기 위해서는 generator function 이 에러를 잡아(catch)줘야 한다.
// throw 메서드를 호출하면 undefined 를 value 값으로, true 를 done 값으로 갖는 iterator result object (이터레이터 리절트 객체) 를 반환한다.

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

const gen1 = genFunc1();
console.log(gen1.next()) // {value: 1, done: false}
console.log(gen1.throw('Error!')) // Error!, {value: undefined, done: true}
console.log(gen1.next()) // {value: undefined, done: true}

 

generator 는 위의 코드 예제에서 본 것과 같이 yield 키워드와 next 메서드를 통해 실행을 중지했다가 재개할 수 있다. 위의 예제에서 generator function 은 genFunc 와 genFunc1 이며, 이를 호출하여 반환된 generator 객체가 바로 gen 과 gen1 이다. 따라서 next, return 등의 메서드를 갖는 것 역시 gen 과 gen1 이다. 

 

console.log('next' in genFunc) // false
console.log('next' in gen) // true

console.log('return' in genFunc) // false
console.log('return' in gen) // true

 

yield 키워드의 역할은 호출자에게 표현식의 평가 결과를 반환하는 것, 또는 함수의 실행을 일시 중지시키는 것이다.

 

📍 평가 결과의 반환

위의 예제에서 yield 를 호출한 호출자는 gen 과 gen1 이며, 따라서 여기에 반환된 값이 저장되게 된다. 이 때 반환되는 값은 value 와 done 프로퍼티를 갖는 iterator result object 이다. 

 

📍 함수의 실행을 일시 중지

next 메서드를 호출하면 yield 표현식까지 실행되고 일시 중지된다. 이때 함수의 제어권이 호출자에게 양도되는데, 이 말의 의미는 호출자가 필요할 때까지 함수를 일시 중지 상태로 두었다가 필요할 때 실행을 재개할 수 있다는 것이다. 

 

또 하나 중요한 특징은, next() 안에 들어가는 인수 (전달인자) 의 특징이다. next 메서드에 들어가는 인수는 yield 표현식을 할당받는 변수에 할당된다. (❗ 주의 : yield 의 평가 결과가 할당되는 것이 아니다! )

 

function* genFunc() {
    // 첫 next 호출 시 여기서 실행 중단
    // value 에는 1이 들어가며 x 에는 아무것도 할당되지 않음
    // 해당 표현식은 다음 next 호출 시 완료됨
    const x = yield 1; 
    
    // 두번째 next 호출 시 전달되는 인수는 x 에 할당됨
    // yield 표혁식 실행 후 중단, value 에는 x + 10 들어감, y 에는 아무것도 할당되지 않음
    // 해당 표현식은 다음 next 호출 시 완료됨
    const y = yield (x + 10);
    
    // 세번째 next 호출 시 x + 10 의 결과가 y 에 할당됨
    // 더 이상의 yield 가 없으므로 함수가 끝까지 실행됨
    // return 값은 value 에 들어가며, done 은 true 로 전환 
    // return 은 별다른 의미가 없으며 종료할 때 사용됨
    return x + y;
}

const gen = genFunc();

// 첫번째 next 싦행 시에는 인수를 넣더라도 무시된다. 
console.log(gen.next()) // {value: 1, done: false}

// x 에 10 의 값이 할당됨 (아무 값도 넣지 않는담변 NaN 이 value 로 반환)
console.log(gen.next(10)) // {value: 20, done: false} 

// y 에 30 의 값이 할당됨
console.log(gen.next(30)) // {value: 40, done: true}

 

generator function 의 핵심은 next 와 yield 를 통해 함수 호출자와 함수의 상태를 주고받을 수 있는 것이다. 

 

 

 

✨  참고자료

• 모던 자바스크립트 Deep Dive (위키북스) 
• MDN