✍️ react-saga > generator > iterator 까지 왔다. next method를 통해 다음 단계로 진행된다 정도로만 얕게 알고 있었기에, 제대로 알고 사용하고자 정리해 보았다.
iterator
- 반복 처리가 가능 한 객체
- next() method를 가지고 있음.
- next() 실행 시, value 와 done 속성을 가지고 있는 객체를 반환함.
{ value: n , done: false } - 반복이 끝나면
{ done: true }를 반환 함.
예시 코드
- iterator로 10까지 console.log 반환 하기
function iterator(start, end){
let index = start;
const it ={
next(){
let result;
if(index <= end){
result ={ value: index, done: false};
index++
}else{
result = { done: true};
}
return result;
}
}
return it;
}
const it = iterator(1, 10);
let result = it.next();
while(!result.done){
console.log(result.value);
result = it.next();
}결과
iterable
- 반복이 가능 한 객체
- [Symbol.Iterator] method를 가지고 있음.
- [Symbol.Iterator] method 는 iterator를 반환함.
- for…of 를 사용 할 수 있음.
- for…of : iterable의 value 를 반환 함.
- 기본 iterable : String, Array, NodeList, Map, Set
예시 코드
- 아래 코드의 iterable 은 next() method를 가지고 있는 iterator.
➡️[[Symbol.Iterator]로 this를 반환 하므로써 iterator를 반환하게 됨.
const iterable = {
start : 1,
end: 10,
[Symbol.iterator](){
this.index = this.start
return this;
},
next(){
let result;
if(this.index <= this.end){
result ={ value: this.index, done: false};
this.index++
}else{
result = { done: true};
}
return result;
}
}
for (let num of iterable) {
console.log(num);
}결과
참고 문헌
한 걸음 한 걸음 계속 걷는 자가 일류다