JavaScriptで2次元配列の同じ位置の要素を合計する方法

JavaScriptでは、配列の中にさらに配列が入った「2次元配列」を扱うことがあります。本記事では、このような2次元配列を受け取り、各サブ配列の同じ位置（インデックス）にある要素同士を合計した新しい配列を返す関数の実装方法を解説します。

問題の概要

例として、次のような2次元配列があるとします。

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

期待される出力

各インデックスごとに要素を合計すると、結果は次のようになります。

• 0番目：43 + 1 + 5 + 11 = 60
• 1番目：2 + 2 + 84 + 5 = 93
• 2番目：21 + 4 + 2 + 3 = 30
• 3番目：54 + 1 = 55

[60, 93, 30, 55]

なお、サブ配列の長さは必ずしも同じとは限らない点に注意してください。存在しないインデックスについては、その位置に値があるサブ配列のみが合計の対象となります。

forEachを使った実装例

まずはforEach()メソッドを使ったシンプルな実装を見てみましょう。

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));

コードの解説

処理の流れは以下のとおりです。

1. 外側のforEach()で、元の配列からサブ配列を1つずつ取り出します。
2. 内側のforEach()で、サブ配列内の各数値とそのインデックスを取得します。
3. 結果用の配列（newArray）の同じインデックスにすでに値が存在すれば、その値に現在の数値を加算します。
4. まだ値が存在しなければ、現在の数値をそのまま代入します。

この仕組みにより、サブ配列の長さが異なる場合でも、正しく各インデックスごとの合計を求めることができます。

実行結果

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

[ 60, 93, 30, 55 ]

reduce()を使った別の実装方法

より関数型プログラミングらしい書き方として、reduce()を組み合わせる方法もあります。

const sumArray = (array) =>
    array.reduce((acc, sub) => {
        sub.forEach((num, index) => {
            acc[index] = (acc[index] || 0) + num;
        });
        return acc;
    }, []);

この方法では、初期値として空の配列を渡し、各サブ配列の要素を順番に累積していきます。(acc[index] || 0)とすることで、値が未定義の場合は0として扱われるため、if文による分岐が不要になり、コードがより簡潔になります。

まとめ

2次元配列の同じ位置の要素を合計するには、ネストされたループで各要素を走査しながら、インデックスをキーにして合計を累積していくのが基本的なアプローチです。サブ配列の長さが不揃いでも対応できる点がポイントです。状況に応じてforEach()とreduce()を使い分けると、読みやすく保守性の高いコードを書くことができます。