JavaScript reduce() vs forEach(): 숫자 배열 합산 성능 비교

이 글에서는 숫자로 이루어진 대규모 배열을 합산할 때 ES6의 forEach()와 reduce() 함수가 각각 소요하는 시간을 비교해 보겠습니다.

실제 환경에서 방대한 크기의 배열을 직접 다룰 수는 없기 때문에, 동일한 합산 연산을 매우 많은 횟수(반복)만큼 수행하는 방식으로 대규모 배열 처리 상황을 시뮬레이션합니다.

예제 코드

두 함수의 실행 시간을 측정하는 코드를 작성해 보겠습니다.

const arr = [1, 4, 4, 54, 56, 54, 2, 23, 6, 54, 65, 65];
const reduceSum = arr => arr.reduce((acc, val) => acc + val);
const forEachSum = arr => {
    let sum = 0;
    arr.forEach(el => sum += el);
    return sum;
};
const iterations = 1000000000;
console.time('reduce');
for(let i = 0; i < iterations; i++){
    let sumReduce = reduceSum(arr);
};
console.timeEnd('reduce');
console.time('forEach');
for(let j = 0; j < iterations; j++){
    let sumForEach = forEachSum(arr);
};
console.timeEnd('forEach');

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

reduce: 19.058s
forEach: 45.204s

측정 결과를 살펴보면, Array.prototype.reduce()가 걸린 시간과 Array.prototype.forEach()가 걸린 시간의 비율은 약 1 : 1.4입니다. 즉, 단순 합산 작업에서는 reduce()가 forEach()보다 약 30% 이상 빠른 성능을 보여줍니다.

이러한 차이가 발생하는 이유 중 하나는 reduce()가 내부적으로 누적값(accumulator)을 관리하며 값을 바로 반환하는 반면, forEach()는 외부 변수를 선언하고 매 반복마다 해당 변수를 갱신(mutate)해야 하기 때문입니다.

다만 실제 성능은 사용하는 JavaScript 엔진(V8, SpiderMonkey 등), 브라우저 또는 Node.js 버전, 배열의 크기에 따라 달라질 수 있으므로, 성능이 중요한 코드에서는 반드시 자신의 실행 환경에서 직접 벤치마크를 진행하는 것이 좋습니다.