728x90
반응형
Generator는 작업 도중에 다른 작업을 하다가 다시 돌아왔을때 이전 작업부터 이어서 진행할 수 있게 해준다.
개념 자체는 다른 대부분의 언어에도 있으니 여러 언어를 공부하신 분들은 이미 아실거다.
- Generator 는 iterable이다. 순회(차례로 진행) 가능한 객체다. for of 문으로 전체 순회가능하다.
iterable은 Symbol.iterator() 메소드가 있고, 이 메소드는 iterator를 반환해야 한다.
iterator는 next() 메소드를 가진다. 이 메소드는 value, done 속성을 가진 객체 반환한다. 작업 끝나면 done=true가 된다. for of 문은 iterable 객체여야 사용가능하며,
Array, Map, Set, String, TypedArray, arguments 모두가 iterable이기 때문에 for of 문을 쓸 수 있는 것이다. - Generator는 미리 값을 생성하지 않고, next()를 호출한 순간에 값을 생성한다. (메모리 관리 효율적임)
- Generator는 function 옆에 *을 붙여서 생성할 수 있고 내부의 yield 문으로 제어 가능하다.
- next() : 가장 가까운 yield를 만날때 까지 수행. (value:yield값, done:false/true) 객체 반환
- return('text") : {value:"text" , done:true} 반환하고 Generator 종료.
- throw(new Error('text') : {value:undefined , done:true} 반환하고 catch문으로 빠짐.
function* counter(){
try{
console.log(1);
yield 1;
console.log(2);
yield 2;
console.log(3);
yield 3;
return "end";
} catch(e){
console.log(e);
}
}
const it = counter(); # generator 객체 반환됨
it.next(); # 가장 가까운 yield 만나면 중단 {value:1, done:false}
it.next(); # 저번 yield 이후부터 다음 yield 까지 수행 {value:2, done:false}
it.next(); # 저번 yield 이후부터 다음 yield 까지 수행 {value:3, done:false}
it.next(); # 저번 yield 이후부터 return을 만나고 종료 {value:undefined, done:true}
it[Symbol.iterator]() === it; # true
for(let i of it){
console.log(i);
}
1
2
3
값 입력받기
function* add(){
try{
const num1 = yield "num1 입력";
const num2 = yield "num2 입력";
return num1+num2;
} catch(e){
console.log(e);
}
}
const it = add(); # generator 객체 반환됨
it.next(5); # {value:5, done:false}
it.next(5); # {value:5, done:false}
return; # {value:10, done:true}
Generator 안에서 다른 Generator 호출
yield* 로 중간에 다른Generator 를 호출가능하다.
yield* 옆에는 Iterable 객체가 올 수 있다.
function* gen1(){
yield "Iron";
yield "Man";
}
function* gen2(){
yield "I";
yield "am";
yield* gen1();
}
console.log(...gen2());
"I am Iron Man"
반응형
'프론트엔드 개발 > Javascript' 카테고리의 다른 글
자바스크립트 - 이벤트 함수, 이벤트 처리기 (0) | 2021.08.28 |
---|---|
자바스크립트 - 코딩 컨벤션 (0) | 2021.08.28 |
자바스크립트 - 프로미스 (promise) (0) | 2021.08.21 |
자바스크립트 - 클래스 (class) (0) | 2021.08.21 |
자바스크립트 - call, apply, bind (0) | 2021.08.21 |