JavaScript/함수형 프로그래밍과 JavaScript ES6+
ES6에서의 순회와 이터러블:이터레이터 프로토콜(2)
정ㅇr
2021. 11. 4. 21:45
728x90
1) 사용자 정의 이터러블, 이터러블/이터레이터 프로토콜 정의
// 사용자 정의 이터러블
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]();
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
// console.log(iterator.next());
for (const a of iterator) console.log(a);
// const arr2 = [1, 2, 3];
// let iter2 = arr2[Symbol.iterator]();
// // iter2.next();
// console.log(iter2[Symbol.iterator]() == iter2);
// for(const a of arr2) console.log(a);well-formed iterator : [Symbol.iterator] 라는 iterator가 자기자신을 리턴할 때 부르는 명칭
코드 상으로 iterable[Symbol.iterator]() == iterable이 true로 리턴된다면 well-formed iterator이다.
자바스크립트에서 순회가 가능한 값들을 가진 모든 것들은 이터러블/이터레이터 프로토콜을 따름
브라우저에서 DOM과 관련된 값들도 이러한 프로토콜을 따른다고 볼 수 있음
for(const a of document.querySelectorAll('*')) console.log(a);
const all = document.querySelectorAll('*');
let iter3 = all[Symbol.iterator]();
console.log(iter3.next());
console.log(iter3.next());
console.log(iter3.next());document.querySelectorAll 을 통해서 <html> <head> 등의 엘리먼트 요소를
next() 함수를 통해서 { value, done } 객체로 반환할 수 있다.
2) 전개 연산자
전개 연산자도 이터러블/ 이터레이터 프로토콜을 따른다.
// 전개 연산자
console.clear();
const a = [1, 2];
console.log([...a, ...[3, 4]]); // [1, 2, 3, 4] 의 하나의 배열로 반환여기서 전개 연산자로 값을 펼칠 수 있는 것도 이 프로토콜을 따르고 있기 때문에 가능한 것이다.
도움되는 참고사이트
https://brunch.co.kr/@nujabes403/9
ES6 Iterator, Iterable 쉽게 이해하기
ES6에서 iterator, iterable 용어는 생각보다 혼동이 많이되는데요, 스스로 정리하다가 다른분들께도 나름 도움이 될까 싶어서 글을 써보았습니다. 목차) 1.Iterator 2.Iterable 3. Iterators that are iterable 4. well
brunch.co.kr
반응형