JavaScriptで配列の合計を求める：再帰・forループ・ES6メソッドのパフォーマンス比較

膨大な数の数値エントリを含む配列があるとします。ここで、配列内の全要素を合計する処理について、「再帰」「単純なforループ」「ES6関数」の3つのアプローチがそれぞれどれほどの時間を要するのかを比較してみましょう。すなわち、再帰 vs forループ vs ES6関数の性能対決です。

ここでは巨大な配列そのものを用意する代わりに、比較的小さな配列に対して大量の反復処理（約1億回）を実行することで計測をシミュレートします。主眼はあくまで、各手法が配列の合計に要する時間のおおよその比率を把握することにあります。

手法1：再帰によるアプローチ

const recursiveSum = (arr, len = 0, sum = 0) => {
    if(len < arr.length){
        return recursiveSum(arr, len+1, sum + arr[len]);
    };
    return sum;
};

手法2：ループによるアプローチ

const loopingSum = arr => {
    let sum = 0;
    for(let i = 0; i < arr.length; i++){
        sum += arr[i];
    };
    return sum;
};

手法3：ES6によるアプローチ

const ES6Sum = arr => arr.reduce((acc, val) => acc+val);

それでは、consoleオブジェクトが提供するtime()メソッドとtimeEnd()メソッドを使って、これら3つの関数のパフォーマンスを比較してみましょう。

実行例

const ITERATIONS = 100000000;
const arr = [12, 65, 87, 2, 23, 87, 4, 66, 34, 89, 89, 32, 4];
const recursiveSum = (arr, len = 0, sum = 0) => {
    if(len < arr.length){
        return recursiveSum(arr, len+1, sum + arr[len]);
    };
    return sum;
};
const loopingSum = arr => {
    let sum = 0;
    for(let i = 0; i < arr.length; i++){
        sum += arr[i];
    };
    return sum;
};
const ES6Sum = arr => arr.reduce((acc, val) => acc+val);
console.time('recursive approach');
for(let k = 0; k < ITERATIONS; k++){
    recursiveSum(arr);
};
console.timeEnd('recursive approach');
console.time('looping approach');
for(let l = 0; l < ITERATIONS; l++){
    loopingSum(arr);
};
console.timeEnd('looping approach');
console.time('ES6 approach');
for(let m = 0; m < ITERATIONS; m++){
    loopingSum(arr);
};
console.timeEnd('ES6 approach');

続いて、コンソールに出力される可能性のある結果を見てみましょう。

注意： これはあくまで出力の一例です。コードのパフォーマンスはシステム環境に大きく依存しますが、3つの関数が要する時間の比率については、どのシステムでもほぼ同様の傾向になると考えてよいでしょう。

recursive approach: 13.774s
looping approach: 3.138s
ES6 approach: 2.493s

この結果から、ある特定のマシン上で大量の反復処理を実行した際の所要時間が読み取れます。配列に対する小規模で基本的な計算においては、ES6の関数（reduceなど）が他のどのアプローチよりも効率的で高性能であることが分かります。

注意： より正確な測定結果を得るためには、オンラインIDE上でのテストは避けることをおすすめします。