[FP&ES6+] 제너레이터

함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 정리한 내용입니다.

 

✅ 제너레이터

제너레이터는 이터레이터이자 이터러블을 생성하는 함수이다.

지난 포스팅에서 이터레이터에 대해 적었었는데, 다시 복습해보자면 이터레이터는 {value, done} 객체를 리턴하는 next() 를 가진 값이고 이터러블은 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값이다.

제너레이터가 이터레이터이고 이터러블을 생성한다고 했으니 다르게 말하면 제너레이터는 이터레이터를 리턴하는 함수이다.

 

제너레이터는 일반 함수 앞에 *을 붙여서 제너레이터 함수를 만든다.

그리고 yield라는 키워드를 사용해 반환할 값을 정의한다.

 

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

let iter = gen();
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());

// output
// {value: 1, done: false}
// {value: 2, done: false}
// {value: 3, done: false}
// {value: undefined, done: true}

for (const a of gen()) console.log(a)

// output
// 1
// 2
// 3

 

여기서 gen()에 return 값을 주게 되면 done이 true가 될 때 value에 undefined 대신 return값이 들어간다.

제너레이터는 이터러블이므로 for of문으로 순회가 가능하지만 순회할 때는 return값 없이 순회가 이루어진다.

그러므로 제너레이터는 순회할 값들의 나열이라고 볼 수 있다.

 

 

✏️ 예제 - 홀수만 접근하기

function* odds(n) {
    for(let i = 0; i < n; i++) {
        if(i % 2) yield i;
    }
}

for(const a of odds(6)) console.log(a)

// output
// 1
// 3
// 5

 

 

✏️ 예제 - 무한으로 접근하기

function* infinity(i = 0) {
    while(true) yield i++
}

이 경우에는 next()를 통해 무한대의 수에 접근할 수 있다.

 

 

✏️ 예제 - 처음부터 특정 범위까지만 접근하기

function* limit(n, iter){
    for(const a of iter) {
        yield a;
        if(a == n) return;
    }
}