14. 제너레이터

📌 14-1 제너레이터란?

이터레이터를 쉽게 만들 수 있는 함수이며 개발자가 함수의 실행과정에 간섭할 수 있다.

• 코드 블록의 실행을 일시정지할 수 있다.
• 필요한 시점에 코드를 재개할 수 있다.

📌 14-2 제너레이터 함수 사용방법

function* 키워드로 선언하며 yield 표현식을 하나 이상 포함하고 있어야한다.

• yield의 값은 이터러블의 값에 해당된다.
• 함수 선언식과 함수 표현식이 가능하면 화살표 함수로는 생성할 수 없다.

// 제너레이터 함수 선언
function* genFunc() {
    yield 1;
    yield 2;
    yield 3;
}
// 제너레이터 함수 실행
const gen = genFunc();
// 결과 : [1, 2, 3]
console.log([...gen]);

🔥 제너레이터 함수를 이용해서 이터레이터를 쉽게 만들 수 있다.

📌 14-3 제너레이터 메소드

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

• 제너레이터는 이터러블을 쉽게 만들 수 있게 해주는 문법이다.
• 제너레이터 객체는 이터러블 프로토콜을 준수한다.

📋 Generator.prototype.next("값")

• next 메소드를 실행하면 2개의 프로퍼티는 가진 객체를 반환한다.
• value와 done를 가지고 있으며 이터레이터 프로토콜과 같은 형식이다.

function* genFunc() {
    yield 1;
    yield 2;
    yield 3;
}
// 제너레이터 함수를 실행하여 변수 gen에 저장한다.
const gen = genFunc();
// 결과 : {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());

🔥 이터레이션 프로토콜과 같이 요소를 모두 순회하면 done의 값을 true로 바꾼다.

🧩 next 메소드를 이용한 양방향 정보교환

• 변수에 yield 값을 할당하고 next 메소드에 파라미터를 전달하면 외부와 내부에서 코드로 상호작용을 할 수 있다.
• 첫 번째 next 메소드에는 파라미터를 전달하지 않지만 만약 전달해도 무시한다.

function* genFunc() {
    // ①
    const answer = yield "이름을 입력하세요.";
    // ②
    yield answer;
}
// ③
const gen = genFunc();
// ④
const question = gen.next().value;
// ⑤
console.log(question);
// ⑥
console.log(gen.next("Kim").value);

📋 코드 동작 원리
① yield 값을 저장할 변수 선언
② next 메소드가 호출되면 yield 값을 반환
③ 제너레이터 함수 실행
④ yield 값을 반환
⑤ 콘솔에 yield 값인 "이름을 입력하세요" 출력
⑥ answer 변수에 yield 값인 ""Kim""을 전달하고 콘솔에 출력

📋 Generator.prototype.return("값")

• 제너레이터 함수를 즉시 종료하며 값을 반환한다.

function* genFunc() {
    yield 1;
    yield 2;
    yield 3;
}
// 제너레이터 함수를 실행하여 변수 gen에 저장한다.
const gen = genFunc();
// 결과 : {value: 1, done: false}
console.log(gen.next());
// 결과 : {value: '종료', done: true}
console.log(gen.return("종료"));
// 결과 : {value: undefined, done: true}
console.log(gen.next());

📋 Generator.prototype.throw("예외처리")
오류 메세지의 값을 전달하여 반환한다.

function* genFunc() {
    // 예외처리 try-catch 구문 이용
    try {
        yield 1;
        yield 2;
        yield 3;
    } catch(err) {
        console.log(err);
    }
} 
// 제너레이터 함수를 실행하여 변수 gen에 저장한다.
const gen = genFunc();
// 결과 : {value: 1, done: false}
console.log(gen.next());
// 결과 : 오류가 발생하였습니다.
gen.throw("오류가 발생하였습니다.");