[JavaScript] 이터레이션 프로토콜 (Iteration Protocol) / 이터러블 (Iterable)

이터레이션 프로토콜

for...of 루프, spread 연산자와 같은 기능들을 사용하여 순회를 가능하게 하는 규격, 인터페이스 

ㄴ 이터레이션 프로토콜을 따르면 이터러블(Iterable)함  : 순회 가능

ㄴ 이터러블한 자료 구조 : Array, String, Map, Set

 

• 공식 문서 :
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols

Iteration protocols - JavaScript | MDN

 

이터러블 하기 위해서는?

Symbol.iterator함수를 호출하면 Iterator (반복자) 프로토콜을 따르는 객체를 반환해야함

반복자 프로토콜은 next() 함수를 통해서 다음 값을 호출해야함

• [Symbol.iterator]() : Iterator{ next() : { value, done } }

• value : 현재 순서의 값
• done : 반복이 모두 끝났는지 true, false 값으로 나타내줌 

 

for...of를 사용하면 자동으로 next()함수를 호출해주지만 수동으로 직접 호출할 수 도 있음

Symbol.iterator함수를 가진 객체나, 특정한 함수가 Iterator를 리턴한다는 것은 순회 가능한 객체!

 

• 사용 예시 :

const array = ['a','b','c'];
for (const item of array) {
    console.log(item);
};

//출력값
//a
//b
//c


//next()함수 직접 호출하기 
const iteratorExample = array.values();

console.log(iteratorExample.next()); // { value: 'a', done: false }
console.log(iteratorExample.next().value); // b
console.log(iteratorExample.next()); // { value: 'c', done: false }
console.log(iteratorExample.next()); // { value: undefined, done: true }

 

 

이터러블 만들기 

const multiple = {
    [Symbol.iterator]() {
        const max = 5;
        let num = 0;

        return {
            next() {
                return { value: num++ * 2, done: num > max }
            }
        }
    }
}

for (const num of multiple) {
    console.log(num);
    //0, 2, 4, 6, 8, 10
}