3. 사용자 정의 이터러블
for of
문은 내부적으로 iterable 객체의 [Symbol.iterator]에 접근해서 next() 메소드를 수행하게 되어있음
- iterable iterator는 JS 내장 객체에서만 지원하는 것이 아니다.
- 많은 오픈소스 라이브러리, JS에서 순회가 가능한 값을 가진 객체는 이러한 프로토콜을 따르게 된다.
- ex) imutable JS도 for of문을 순회할 수 있도록 구현
- DOM 관련 값들도 이러한 for of문을 통한 순회가 가능하다!
const iterable = {
[Symbol.iterator]() {
let i = 3;
return {
next() {
return i == 0 ? {done:true} : {value:i--, done:false}
}
}
}
}
let iterator = iterable[Symbol.iterator]();
for(const a of iterable) {
console.log(a);
}
이렇게 설계된 iterable 객체의 단점?
- 설계된 iterator 자체를 for of문에돌리면 오류가 발생!
- 잘 설계된 iterable (well-formed iterable, iterator)
- iterator를 만들었을 때 next()를 진행하다가 그대로 이어서 순회를 진행 O
- iterator 자체를 for of에 넣었을 때 그대로 모든 값을 순회할 수 있음
- 왜냐면 iterator 자체도 '자기 자신을 return하는 iterator'를 가지고 있기 때문
- 따라서, iterator 내부에도 iterator 메소드를 선언에서 자기 자신을 반환하게 끔 해줘야 됨
사용자 정의 iterable 객체 재설계
const iterable = {
[Symbol.iterator]() {
let i = 3;
return {
next() {
return i== 0 ? {done: true} : {value: i--, done: false}
},
[Symbol.iterator]() {
return this;
}
}
}
};
let iterator = iterable[Symbol.iterator]();
iterator.next();
for(const a of iterator) {
console.log(a);
}
4. 전개 연산자
- 전개 연산자 역시, 이터러블, 이터레이터 프로토콜을 따르기 때문에 이터러블 객체를 펼쳐서 전개해줄 수 있음
const a = [1,2];
console.log(...a);
console.log([...a, ...[3,4]);