generator base

javascript에 generator라는 것이 있다.
처음에는 "이게 모야!!!" 생각 하며, 뭐 하는 것인지 몰랐다.

반복자를 구현 할려면 [Symbol.iterator]()와 .next() 메소드를 구현해야 하지만, 제너레이터를 사용하면 Iterable, Iterator를 쉽게 구현 할수 있다.

제너레이터의 기본

예제를 먼저 살펴보고 함수를 설명한다.

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

var gen = generator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

/*
위와 동일한 결과이다.
for(const val of generator()) {
console.log(val);
}
*/

함수 선언 : function*로 시작
제너레이터 실행: next()
결과: value로 얻어온다.
진행 상태 : done
값 반환 : yield로 반환

객체 프로퍼티에서 sleep 한후 실행

제너레이터를 사용해 유니티의 코루틴을 흉내내 보자.
원하는 시간 만큼 Sleep 한후에 다시 실행 할 것이다.

function *myGenerator() {
}

var my= {
    self,
    func :
    function*(){
        console.log('my start');
        setTimeout(()=> { self.next(); }, 3000);
        yield 3;
        console.log('my later 3 sec');
        setTimeout(()=> { self.next(); }, 1000);
        yield 1;
        console.log('my later 1 sec');
        setTimeout(()=> { self.next(); }, 2000);
        yield 2;
        console.log('my later 2 sec');
    },
    exec: function() {
        self = this.func();
        self.next();
    }
};

my.exec();

클래스에서 sleep 한후 실행

객체 프로퍼티 예제를 클래스에서 사용 할수 있는 예제로 변환 하였다.

class Npc {
    constructor(){
        this.workGen = this.work();
    }

    runStep1() {
        console.log(this, 'Npc Step1 3sec');
    }

    runStep2() {
        console.log(this, 'Npc Step2 3sec');
    }
    sleep(sec) {
        setTimeout(()=> { this.workGen.next(); }, sec*1000);
    }

    * work(){
        console.log('Npc start');
        this.sleep(3);
        yield 3;
        this.runStep1();
        this.sleep(2);
        yield 2;
        this.runStep2();
    }

    run(){
        this.workGen.next();
    }
}

let npc = new Npc();
npc.run();

참조)
http://hacks.mozilla.or.kr/2015/08/es6-in-depth-generators/
https://thejsguy.com/2016/10/15/a-practical-introduction-to-es6-generator-functions.html