이터레이션 프로토콜의 필요성(지연평가)

Array, String, map, Set ,TypedArray, DOM 컬렉션, arguments와 같이 for ...of 문, 스프레드 문법, 배열 디스트럭처링 할당 등을 이용 할 수 있는 이터레이션 프로토콜을 준수하는 이터러블들이다.

ES6에서부터 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 일원화 하였다.

즉, 이터러블을 지원하는 데이터 소비자는 내부에서 Symbol.iterator 메서드를 호출해 이터레이터를 생성하고 이터레이터 next 메서드를 호출하여 이터러블을 순회하며 이터레이트 result 객체를 반환한다.

근데 이 이터러블을 사용할 수 있을때 장점은, 지연평가를 통해 데이터를 생성한다는 점이다.

지연평가는 모든 데이터를 메모리에 미리 확보하고 데이터를 공급하는게 아닌, 데이터가 필요한 시점에 데이터를 생성합니다.

그리고, 필요한 데이터 만큼만 생성합니다. 이것은 메모리 낭비와 속도 측면에서 유리함을 알 수 있습니다.

1억까지 숫자배열에서 5개의 숫자를 리턴하는 수열로 예시를 들어보겠습니다.

const makeArr = function (max) {
    let value = 0;
    let arr = [];
    while (value < max) {
        value++;
        arr.push(value);
    }
    return arr;
};

const makeIter = function (max) {
    let value = 0;
    let arr = [];
    return {
        [Symbol.iterator]() {
            return {
                next() {
                    value = value + 1;
                    arr.push(value);
                    return { value, done: value >= max };
                },
            };
        },
    };
};

function getFiveValues(iter) {
    const arr = [];
    for (const value of iter) {
        arr.push(value);
        if (arr.length === 5) {
            return arr;
        }
    }
}

console.time('makeArr');
getFiveValues(makeArr(100000000));
console.timeEnd('makeArr');

console.time('makeIter');
getFiveValues(makeIter(100000000));
console.timeEnd('makeIter');

이 경우에 갯수가 늘수록 수 배열을 return하는 경우에는 값이 커지지만, iterator는 커지지 않는다.

물론 이런 특수한 경우가 없겠지만, 아무튼 꽤 충격적인 차이를 볼 수 있었다.