JavaScript - Iterator의 순회

1. 리스트 순회

1) Array 순회

const arr = [1, 2, 3];
for (const a of arr) log(a);

• key로 접근을 통해 순회 가능

2) Set 순회

const set = new Set([1, 2, 3]);
for (const a of set) log(a);

• key값으로 접근이 불가능함

3) Map 순회

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const a of map) log(a);

• key값으로 접근이 불가능함.

2. Symbol.iterator의 원리

1) Symbol.iterator

• ES6에 추가된 심볼
• 객체의 키로 사용될 수 있는 심볼
• arr, set, map을 for .... of로 접근할 수 있는 이유!

const arr = [1, 2, 3];
arr[Symbol.iterator] = null; //심볼을 지우면 키 값이 지워져 더이상 이터러블하지 않음.
for (const a of arr) log(a);

2) 이터러블 / 이터레이터 프로토콜

• 이터러블

  • 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값 => 즉 순회가 가능하려면 ES6에는 이 Symbol.iterator가 필수다!

• 이터레이터

  • { value, done } 객체를 리턴하는 next()를 가진 값

  • let iterator = arr[Symbol.iterator]();
    iterator.next() // { value: 1, done: false } next를 통해 value가 증가하면서 리턴함
    iterator.next() // { value: 2, done: false }
    iterator.next() // { value: undefined, done: true } done이 true가 되면 순회에서 벗어나 빠져나온 것

• 이터러블/이터레이터 프로토콜

  • 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록한 규약

• 사용자 정의 이터러블

const iterable = {
    [Symbol.iterator]() {
        let i = 3; //1씩 줄어들게 함
        return {
            next() {
                return i == 0 ? {done: true} : { value: i--, done:false };
            },
            [Symbol.iterator]() { return this; } //next를 사용한 직후의 상태에서 언제든 다시 진행
        }
    }
}
let iterator = iterable[Symbol.iterator]();
for (const a of iterable) log(a);

for (const a of document.querySelectorAll('*')) log(a);
const all = document.querySelectorAll('*');
let iter3 = all[Symbol.iterator](); //DOM 트리에서도 심볼 이터레이터가 구현되어있음.
log(iter3.next()); //head
log(iter3.next()); //body
log(iter3.next()); //script

3) 전개 연산자

console.clear();
const a = [1, 2];
a[Symbol.iterator] = null;
log([...a, ...[3, 4]]); //이터레이터를 펼쳐서 사용가능. set map arr 모두 사용가능