#JavaScript

이터레이더와 제너레이터 ES6

ES6에서! 이터레이터와 제너레이터가 도입됨.

제너레이터는 간단히 이터레이터에 의존하는 개념!

배열은 이터러블 객체의 좋은 예이다

이터레이터 예제 (배열) 및 호출해보기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const arrays = [

    "aaaa",
    "bbbb",
    "cccc",
    "dddd",
    "eeee",
    "ffff",
    "gggg",
]


const iteratorObject = arrays.values();


iteratorObject.next();
-> {value: "aaaa", done: false}
iteratorObject.next();
-> {value: "bbbb", done: false}
iteratorObject.next();
-> {value: "cccc", done: false}
iteratorObject.next();
-> {value: "dddd", done: false}
iteratorObject.next();
-> {value: "eeee", done: false}
iteratorObject.next();
-> {value: "ffff", done: false}
iteratorObject.next();
-> {value: "gggg", done: false}
iteratorObject.next();
-> {value: undefined, done: true}
iteratorObject.next();
-> {value: undefined, done: true}

done 프로퍼티가 true로 바뀌는 것을 볼수 있다. 이터레이터의 데이터는 끝까지 읽을수 있음을 느낄수 있다.

done 프로퍼티 활용해보기

1
2
3
4
5
6
7
8
let test = arrays.values();

let currentLocation = test.next();

while(!currentLocation.done){
    console.log(currentLocation.value);
    currentLocation = test.next();
}

제너레이터

제너레이터란 이터레이터를 사용해 자신의 실행을 제어하는 함수!

일반적인 함수 vs 제너레이터

1
2
3
[일반적인 함수]
함수는 매개변수(파라미터)를 받고 값을 반환하지만, 호출할 부분에서 매개변수 외에는 함수의 실행을 제어할 방법이 전혀 없다.
즉 함수를 호출하면 그 함수가 종료될 때까지 제어권을 완전히 넘긴다.

제너레이터 2가지 새로움 개념

  1. 하나의 함수의 실행을 개별적 단계로 나눔으로써 함수의 실행을 제어
  2. 실행 중인 함수와 통신

제너레이터는 언제든 호출자에게 제어권을 넘길수 있다.
제너레이터는 호출한 즉시 실행되지 않는다. 대신 이터레이터를 반환하고, 이터레이터의 next 메서드를 호출함에 따라 실행된다.

제너레이터를 만들때 function 키워드 뒤에 애스터리스크(*)을 붙인다. 이것을 제외하면 문법은 일반적인 함수와 같다. 제너레이터에서 return외에 yield가 있음.

제너레이터 예제 및 호출 법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function* arrays {

    yield 'aaaa';
    yield 'bbbb';
    yield 'cccc';
    yield 'dddd';
    yield 'eeee';

}

const iteratorObject = arrays();
iteratorObject.next();
iteratorObject.next();
iteratorObject.next();
iteratorObject.next();
iteratorObject.next();
iteratorObject.next();

활용 방법 

1
2
3
for(let a of arrays()){
    console.log(a);
}

실행중인 함수와 통신을 해보자 ex)

1
2
3
4
5
6
7
function* test(){
    const car = yield "what is your car?";
    const color = yield "what is your favorite color?";
    return `${car} 의 색은 ${color} 입니다`;
}

const t = test();

실행

1
2
3
4
5
6
7
t.next();
-> {value: "what is your car?", done: false}

t.next('good car');
-> {value: "what is your favorite color?", done: false}
t.next('red');
-> {value: "good car 의 색은 red 입니다", done: true}

제너레이터는 => 를 쓸수 없음!!

제너레이터를 쓰게 될 경우 주요한 값을 return으로 반환하지말자!, 반환 값을 사용하려 할때는 yield를 써야 한다. 되도록 제너레이터에서 return을 쓸 때는 반환값을 쓰지 않는 습관들을 들이길 권한다!.

어디 활용할지… 나중에 바로 볼수 있게… 블로그 남김…

#JavaScript