Modern Js 12-1 (제너레이터 란)

제너레이터에 대해 알아 봅시다.

Featured image

본 문서는 모던 자바스크립트를 정리하고 공부한 문서입니다.

제너레이터

제너 레이터란?
es6에서 도입된 함수로 일반적인 함수랑 다르게 여러 개의 값중 하나를 반환 할수 있게 해줍니다.

    var i = 1;
    function* genteratefunction(){
        yield i++;
        yield i*3;
        return 3;
    }

    let generator = genteratefunction();
    console.log(generator);
    console.log(generator.next());
    console.log(generator.next());
    console.log(generator.next());
    Object [Generator] {}
    { value: 1, done: false }
    { value: 6, done: false }
    { value: 3, done: true }

제너레이터와 이터러블

이터러블이 뭐였더라? 순회가 가능한 형태의 객체를 의미합니다.(ex: 문자열, 배열)

    var i = 1;
    function* genteratefunction(){
        yield i++;
        yield i*3;
        return 3;
    }

    let generator = genteratefunction();

    for( let tmp of generator){
        console.log(tmp) // 1 출력후 6 출력
    }

제너레이터 컴포지션

제너레이터 컴포지션이란? 제너레이터 안에 제너레이터를 임베딩(함수안에 다른 제너레이터함수 추가) 할수 있게 해주는 기능입니다.

    function* generateSequence(start, end) {
        for (let i = start; i <= end; i++) yield i;
    }

    function* generatePasswordCodes() {
    // 0..9
    yield* generateSequence(48, 57);

    // A..Z
    yield* generateSequence(65, 90);

    // a..z
    yield* generateSequence(97, 122);
    }

    let str = '';
    for(let code of generatePasswordCodes()) {
    str += String.fromCharCode(code);
    }
    console.log(str); // 0..9A..Za..z

제너레이터 함수의 정보 교환

지금까지 우리는 next()를 사용해서 함수안에 내용물을 가져오기만 했습니다. 그렇다면 어떻게 제너레이터 함수안에 정보를 전달할수 있을까요?

    function* genteratefunction(){
        let result = yield  "자바스크립트는 배울게 많은 가요?"
        console.log(result);
    }

    let generator = genteratefunction();

    console.log( generator.next().value); // 처음 호출 

    generator.next("네 엄청 많아요"); //두번째 호출

    자바스크립트는 배울게 많은 가요?
     엄청 많아요

generator.throw

genrator.throw란? 만약 제너레이터로 함수를 돌리다가 특정 상황에서 빠져 나올려면 어떻게 할까요?

    function* genteratefunction(){
        try{
            let result = yield  "자바스크립트는 배울게 많은 가요?"
            console.log(result);
        } catch(e){
            console.log(e);
        }
    }

    let generator = genteratefunction();

    console.log( generator.next().value);

    generator.throw(new Error('접속이 불안정 합니다.'))
    자바스크립트는 배울게 많은 가요?
    Error: 접속이 불안정 합니다.
        at Object.<anonymous> (/Users/kud/mjs.js:14:17)
        at Module._compile (internal/modules/cjs/loader.js:1201:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
        at Module.load (internal/modules/cjs/loader.js:1050:32)
        at Function.Module._load (internal/modules/cjs/loader.js:938:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
        at internal/main/run_main_module.js:17:47

aync 제너레이터

만약 제너레이터에서 await을 사용해야할땐 어떻게 해야하는가?