【JavaScript】配列の配列の同じインデックス要素を合計して1つの配列にする方法

配列の配列の同じインデックス要素を合計して1つの配列にする方法

JavaScriptでは、配列の配列（2次元配列）を受け取り、各サブ配列の同じインデックス位置にある要素を合計した新しい配列を返す関数を作成する必要があるケースがあります。

例えば、元の配列が以下のとおりだったとします。

[
    [43, 2, 21],[1, 2, 4, 54],[5, 84, 2],[11, 5, 3, 1]
]

この場合、期待される出力は以下のとおりです。

[60, 93, 30, 55]

これは、各サブ配列の0番目の要素（43 + 1 + 5 + 11 = 60）、1番目の要素（2 + 2 + 84 + 5 = 93）というように、同じインデックス同士の要素を順に足し合わせた結果です。サブ配列の長さが異なっていても、存在するインデックスの要素だけが合計されるため、柔軟に対応できます。

サンプル関数 sumArray() の実装

この処理を行う関数の完全なコードは以下のとおりです。

例

const arr = [
    [43, 2, 21],[1, 2, 4, 54],[5, 84, 2],[11, 5, 3, 1]
];
const sumArray = (array) => {
    const newArray = [];
    array.forEach(sub => {
        sub.forEach((num, index) => {
            if(newArray[index]){
                newArray[index] += num;
            }else{
                newArray[index] = num;
            }
        });
    });
    return newArray;
}
console.log(sumArray(arr));

出力

コンソールには以下のように出力されます。

[ 60, 93, 30, 55 ]

コードの解説

上記のコードでは、まず元の配列の各サブ配列を forEach() で反復処理し、さらにその中の各数値に対して処理を行っています。新しい配列の該当インデックスにすでに値が存在する場合はその数値を加算し、存在しない場合はその数値をそのまま新しい値として設定しています。こうすることで、すべてのサブ配列を走査し終えた時点で、インデックスごとの合計値が格納された配列が完成します。

reduce() を使ったより簡潔な書き方

reduce() メソッドを組み合わせれば、同じ処理をより簡潔に記述することもできます。

const sumArray = (array) =>
    array.reduce((acc, sub) => {
        sub.forEach((num, index) => {
            acc[index] = (acc[index] || 0) + num;
        });
        return acc;
    }, []);
console.log(sumArray(arr)); // [ 60, 93, 30, 55 ]

どちらの方法でも結果は同じですが、コードの意図や可読性に応じて使い分けるとよいでしょう。