Generator

📌 Generator

💡 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능

• function 뒤에 ‘에스터 리스크(*)‘ 붙여서 선언

function* fn1() {
    console.log(1);
    yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    console.log(4);
    yield 3;
    return ‘finish’;
}

const a = fn1();
a.next(); // 1

• fn1()함수를 실행하면 generator 객체를 반환한다.
• 위 코드를 실행시 generator 객체만 반환되고 본문 코드는 실행되지 않는다.
• 실제로 console.log(1)은 찍히지 않는다.
• next() 메서드는 가장 가까운 yield 문을 만날때 까지 실행되고 데이터 객체 를 반환한다.
• 반환된 데이터 객체는 value와 done 프로퍼티를 가지는데 value는 yield문의 오른쪽에 있는 값이다.
• 만약 값을 생략하면 undefined가 된다.
• done은 이름 그대로 함수가 실행됐는지 판단하며 함수가 끝나면 true, 진행중이면 false이다.
• 함수가 다 끝나고 next() 메서드를 실행하면 value는 undefined, done은 true를 계속 반환한다.

📌 Generator 메서드

next()
return()
throw()

1. next(): 다음 yield문을 만날때 까지 코드 실행
2. retrun(): 함수 중간에 호출하면 이 메서드의 인자로 받은 값을 value의 값으로 done은 true를 반환한다.

// return() 메서드 예시

function* fn2() {
    console.log(1);
    yield 1;
    console.log(2);
    yield 2;
    console.log(3);
    console.log(4);
    yield 3;
    return ‘finish’;
}

const b = fn2();
const end = b.return(‘END’);
console.log(end); // { value: ‘END’, done: true }

• return() 메서드 호출 이후에 next()가 실행되도 value를 얻을 수 없고 (undefined) done은 true이다.

3. throw(): 실행되면 catch문에 작성된 예외처리를 반환한다.

// throw() 메서드 예시
// 
예외처리를 위해 try…catch 문을 사용

function* fn2() {
    try{
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      console.log(4);
      yield 3;
      return ‘finish’;
    } catch(e) {
         console.log(e);
    }
}

const b = fn2();
b.throw(new Error(‘err’)); // err

• err를 반환하고 done은 true가 된다.

📌 iterable과 iterator

• iterable: 반복 가능하다는 의미
• iterator: 이 메서드를 호출한 결과

📒 iterable의 조건

1. Symbol.iterator 메서드가 있어야 한다.
2. Symbol.iterator는 iterator를 반환해야 한다.

📍iterator

1. next() 메서드를 가진다.
2. next() 메서드는 value와 done 속성을 가진 객체를 반환한다.
3. 작업이 끝나면 done은 true가 된다.

🔔 generator는 iterable 이면서 iterator 이다.

const arr = [ 1, 2, 3, 4, 5 ];

const it = arr[Symbol.iterator]();
console.log(it); // Object [Array Iterator] {}
console.log(it.next()); // 1

• 배열은 Symbol.iterator 메서드를 가지고 있고 이 메서드가 반환하는 값이 iterator 이므로 iterable하다고 할 수 있다.
• 즉, 배열은 반복 가능한 객체 이다.

for (let num of arr) {
    console.log(num);
};

// 1
// 2
// 3
// 4
// 5

‼️ 문자열 또한 iterable 하기 때문에 for of 문으로 위와같이 돌리면 동일하게 동작한다.

📌 외부로부터 값을 입력받기

function* fn3 () {
    const num1 = yield “첫 번째 숫자를 입력하세요.”;
    cosnole.log(num1);

    const num2 = yield “두 번째 숫자를 입력하세요.“;
    console.log(num2);

    return num1 + num2;
}

const d = fn3();
d.next(); // { value: ‘첫 번째 숫자를 입력하세요.’, done: false }
d.next(2); // 2, { value: ‘두 번째 숫자를 입력하세요.‘, done: false }
console.log(d.next(4)); // 4, { value: 6, done: true }

• 위 함수에서 변수 d에 fn3()를 할당하고 next() 메서드에 매개변수로 숫자를 전달하면 num1 변수에 value 값을 할당한다.
• 이후 두 번째 yield문을 만난다 여기서도 next() 메서드에 매개변수로 값을 주고 이를 콘솔로 찍어보면 num2는 4가 할당되고 return에 num1+num2의 값을 반환하기 때문에 value는6이다.
• 함수가 종료되었기 때문에 done은 true로 바뀐다.

📌 메모리 효율성

🔔 Generator는 값을 미리 만들어 두지 않는다.
때문에 메모리 관리 측면에서 효율적이다.
필요한 순간에만 연산해서 값을 준다.

// 예시

function* fn4 () {
    let num = 0;
    while(true) {
        yield num++;
    }
}

const d = fn4();
console.log(d.next()); // 1
console.log(d.next()); // 2
console.log(d.next()); // 3 

• next로 호출 할때 마다 값을 주기 때문
• 일반적인 함수로 값을 구할때 모든 값을 미리 계산해 놔야 한다.
• 쓸지 안쓸지 정해지지 않은 상황에서도 그 값을 유지 해야한다.
• generator를 사용하면 필요한 순간까지 계산을 미룰 수 있다.

📌 generator를 다른 generator 함수에서 호출하기

function* gen1 () {
    yield “W”;
    yield “o”;
    yield “r”;
    yield “l”;
    yield “d”;
}

function* gen2 () {
    yield “Hello “;
    yield* gen1();
    yield “!”;
}

console.log(…gen2()); // Hello, W o r l d !

• 콘솔에 찍을때 …gen2() 처럼 구조분해할당 을 사용한 이유: for of 와 마찬가지로 done이 true가 될때까지 펼처주는 역할을 한다.
• yield* 오른쪽에는 generator 객체가 왔는데, 사실 반복 가능한 모든 객체가 올 수 있다.

✒️ Generator 정리
1. 제네레이터는 다른 작업을 하다가 돌아와서 next()를 호출시 진행이 멈췄던 부분 부터 이어서 진행한다.
2. 강의 하셨던 분은 Redux Saga에서 주로 사용한다고 한다.