iterator 와 generator

이터레이터(iterator)

• 지금 어디 있는지 파악할 수 있게 돕는 책갈피 같은 개념
• 이터레이터가 끝까지 진행하면 뒤로 돌아갈 수 없음
• 독립적. 새 이터레이터를 만들때마다 처음에서 시작

next() :

• 다음 항목으로 넘어감
• value : 항목의 값
• done : 마지막 항목을 끝내면 true로 바뀜

const book = [
    '1 page',
    '2 page',
    '3 page',
];
 
const it = book.values(); // 이터레이터 생성
 
console.log(it.next()); //{ value : '1 page', done: false }
console.log(it.next()); //{ value : '2 page', done: false }
console.log(it.next()); //{ value : '3 page', done: false }
console.log(it.next()); //{ value : undefined, done: true }
console.log(it.next()); //{ value : undefined, done: true }

이터레이션 프로토콜

• 모든 객체를 이터러블(iterable)객체로 바꿀 수 있다
• 클래스에 Symbol.iterator 심볼 메서드가 있고 value와 done 프로퍼티를 가진 객체를 반환하는 next메서드를 가진 객체를 반환하는 내용을 구현

class Log {
    constructor() {
        this.messages = [];
    }
 
    add(message) {
        this.messages.push({message, timestamp: new Date()});
    }
 
    [Symbol.iterator]() {
        let i = 0;
        const messages = this.messages;
        return {
            next() {
                if (i >= messages.length) {
                    return {value: undefined, done: true}
                }
                return {value: messages[i++], done: false}
            }
        }
    }
}
 
const log = new Log();
log.add('first');
log.add('second');
log.add('third');
 
for (let entry of log) {
    console.log(`${entry.message} @ ${entry.timestamp}`);
}

제너레이터(generator)

• 이터레이터를 사용해 자신의 실행을 제어하는 함수
• 호출 즉시 실행되지 않으며 이터레이터를 반환한다.
• 함수의 실행을 중간에 멈추었다가 다시 재개할 수 있다.
• next() 메서드를 실행하면 제너레이터 함수 바디를 실행하다가 yield를 만나면 바로 중지하고 yield된 값 반환
• function 키워드 뒤에 애스터리스크 (*)를 붙임

function* rainbow(){
    yield 'red';
    yield 'orange';
    yield 'yellow';
    yield 'green';
    yield 'blue';
    yield 'indigo';
    yield 'violet';
}
 
const it = rainbow();
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
/*
result :
{ value: 'red', done: false }
{ value: 'orange', done: false }
{ value: 'yellow', done: false }
{ value: 'green', done: false }
{ value: 'blue', done: false }
{ value: 'indigo', done: false }
{ value: 'violet', done: false }
{ value: undefined, done: true }
*/
```javascript
### 양방향 통신
```javascript
function* interrogate(){
    const name = yield 'What is your name?';
    const color = yield 'What is your favorite color?'
    return `${name}'s favorite color is ${color}`;
}
 
const it = interrogate();
 
console.log(it.next());
console.log(it.next('Peter'));
console.log(it.next('Blue'));
  
result :
{ value: 'What is your name?', done: false }
{ value: 'What is your favorite color?', done: false }
{ value: 'Peter\'s favorite color is Blue', done: true }

제너레이터와 return

• 제너레이터에서 리턴을 사용하면 위치와 관계없이 done이 true가 되고 value 프로퍼티는 리턴이 반환하는 값이 됨
• 제너레이터를 사용할때 done이 true가 되면 value 프로퍼티에 신경쓰지 않게됨 (ex. for...of 루프에서 마지막 리턴은 출력되지 않음)

function* genFunc(){
    yield 1;
    yield 2;
    yield 3;
    return 4;
}
 
let gen = genFunc();
 
for(let it of gen){
    console.log(it);
}
function* genFunc(){
    yield 1;
    yield 2;
    yield 3;
}
 
let gen = genFunc();
 
console.log(gen.next());
console.log(gen.return(22));
console.log(gen.next());

• http://hacks.mozilla.or.kr/2015/08/es6-in-depth-generators/