[JavaScript] Iterator Helper

마치 Java 진영의 Stream API 같은 친구들이 JavaScript 진영에도 공식적으로 추가되고 있고, 이들을 Iterator Helper라고 한다.

Iterator - JavaScript | MDN

이터레이터 헬퍼 메소드들은 종단 연산이 호출되는 시점에 평가되므로, 배열 전체를 순회하는 대신 조건에 맞는 몇 개만 찾아오고자 하는 경우에는 기존 Array.prototype 메소드들보다 훨씬 빠르게 동작한다.

const numbers = [];
for (let i = 0; i < 1_000_000; i++) {
    numbers.push(getRandomInt()); // 0~99 중 하나의 정수를 랜덤하게 삽입
}

/** numbers 배열에 삽입된 값 중 홀수인 값을 딱 3개만 추출하기 */

// 배열 메소드를 사용하는 방식
const result1 = (function getThreeOddNumbersV1(_numbers) {
    console.time("getThreeOddNumbersV1");
    const result = _numbers.filter((number) => number % 2 === 1)
        .slice(0, 3);
    console.timeEnd("getThreeOddNumbersV1");

    return result;
})(numbers);
console.log(`result1: ${result1}`);

console.log(`--- 구분선 ---`);

// 이터레이터 메소드를 사용하는 방식
const result2 = (function getThreeOddNumbersV2(_numbers) {
    console.time("getThreeOddNumbersV2");
    const result = _numbers.values()
        .filter((number) => number % 2 === 1) // 이 시점에서 filter 로직이 실행되지는 않음
        .take(3)
        .toArray(); // 종단 연산
    console.timeEnd("getThreeOddNumbersV2");

    return result;
})(numbers);
console.log(`result2: ${result2}`);

m1 mac pro 기준으로 실행 결과는 다음과 같다!

getThreeOddNumbersV1: 15.153ms
result1: 77,67,69
--- 구분선 ---
getThreeOddNumbersV2: 0.014ms
result2: 77,67,69

다만 해당 기능은 Node 22, ES 2026에 정의된 최신 문법에 속하기에 실무 도입에 있어서는 주의가 필요할 것으로 보인다.
그나마 백엔드의 경우에는 Node 22가 LTS라 괜찮을 듯!