JavaScriptで配列を3要素ずつ区切って合計した新しい配列を作成する方法

はじめに

この記事では、数値の配列を受け取り、元の配列から3つずつの連続する要素の合計を要素として持つ新しい配列を返すJavaScript関数の作り方を紹介します。

問題の概要

たとえば、入力配列が次のような場合を考えてみましょう。

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

期待される出力は次のとおりです。

const output = [3, 12, 21, 9];

これは、配列を先頭から3要素ずつグループ化し、それぞれのグループの合計を計算しているためです。

• 0 + 1 + 2 = 3
• 3 + 4 + 5 = 12
• 6 + 7 + 8 = 21
• 9（残りの1要素のみなので、そのままの値）＝ 9

サンプルコード

以下が実際のコードです。

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const thriceSum = arr => {
    if(!arr.length){
        return [];
    }
    const res = [];
    for(let i = 0; i < arr.length; i += 3){
        res.push(arr[i] + (arr[i+1] || 0) + (arr[i+2] || 0));
    };
    return res;
};
console.log(thriceSum(arr));

コードの解説

このコードのポイントを順番に見ていきましょう。

• 空配列への対応： 最初にif(!arr.length)で配列が空かどうかをチェックし、空の場合はそのまま空の配列[]を返します。
• 3つずつのループ処理： forループのインデックスをi += 3とすることで、一度に3要素ずつ進みます。
• 末尾要素の安全な処理： (arr[i+1] || 0)のように書くことで、配列の末尾で要素が存在しない場合（undefined）でも0として扱われ、エラーにならず正しく合計を計算できます。
• 結果の返却： 各グループの合計をpush()で格納した配列resを最後に返します。

出力結果

このコードをコンソールで実行すると、次の出力が得られます。

[ 3, 12, 21, 9 ]

まとめ

このように、forループのステップ幅を3に設定し、OR演算子（||）で未定義の値を0に置き換えることで、配列を3要素ずつ区切った合計をシンプルに求めることができます。ループのステップ幅やグループ内の要素数を変更すれば、任意のサイズのグループごとの集計にも応用できる汎用的なテクニックです。