JavaScriptで配列をチャンク化する方法：2要素ずつのサブ配列に分割する

JavaScriptでは、リテラルの配列を受け取り、元の配列の要素をちょうど長さ2のサブ配列に分割した新しい配列を返す関数を実装する必要がある場面があります。元の配列の長さが2で割り切れない場合、最後のサブ配列には1つの要素のみが含まれるようにします。

例えば、入力配列が以下の場合：

const arr = [1, 2, 3, 4, 5, 6, 7];

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

const output = [[1, 2], [3, 4], [5, 6], [7]]

それでは、この関数を実装してみましょう。

実装例

この処理を行うコードは以下の通りです。

const arr = [1, 2, 3, 4, 5, 6, 7];
const chunk = arr => {
    const size = 2;
    const chunkedArray = [];
    for (let i = 0; i < arr.length; i++) {
        const last = chunkedArray[chunkedArray.length - 1];
        if(!last || last.length === size){
            chunkedArray.push([arr[i]]);
        }else{
            last.push(arr[i]);
        }
    };
    return chunkedArray;
};
console.log(chunk(arr));

出力結果

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

[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7 ] ]

コードの仕組み

この関数のロジックはシンプルです。まず、チャンクのサイズとしてsize = 2を定義し、結果を格納するための空の配列chunkedArrayを用意します。ループ処理の中では、常にchunkedArrayの最後のサブ配列を参照し、その配列が存在しない場合、またはすでにサイズがsizeに達している場合には新しいサブ配列を作成して追加します。それ以外の場合は、既存の最後のサブ配列に現在の要素を追加していきます。これにより、余った要素が自動的に最後の小さなサブ配列に収まるため、配列の長さが偶数でも奇数でも正しく動作します。