JavaScriptでオブジェクトの配列をプロパティ値ごとにグループ化する方法

JavaScriptでは、オブジェクトの配列を特定のプロパティの値を基準にグループ化したい場面がよくあります。例えば、次のような果物や野菜のデータを含む配列があったとしましょう。

const arr = [
    {food: 'apple', type: 'fruit'},
    {food: 'potato', type: 'vegetable'},
    {food: 'banana', type: 'fruit'},
];

ここでの課題は、このような配列を受け取るJavaScript関数を作成することです。

作成する関数は、各オブジェクトが持つ「type」プロパティの値をもとに、配列内のオブジェクトをグループ化します。

つまり、「fruit」タイプのオブジェクトはひとつにまとめ、「vegetable」タイプのオブジェクトは別々にまとめるということです。

サンプルコード

実際のコードは以下のようになります。

const arr = [
    {food: 'apple', type: 'fruit'},
    {food: 'potato', type: 'vegetable'},
    {food: 'banana', type: 'fruit'},
];
const transformArray = (arr = []) => {
    const res = [];
    const map = {};
    let i, j, curr;
    for (i = 0, j = arr.length; i < j; i++) {
        curr = arr[i];
        if (!(curr.type in map)) {
            map[curr.type] = {type: curr.type, foods: []};
            res.push(map[curr.type]);
        };
        map[curr.type].foods.push(curr.food);
    };
    return res;
};
console.log(transformArray(arr));

実行結果

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

[
    { type: 'fruit', foods: [ 'apple', 'banana' ] },
    { type: 'vegetable', foods: [ 'potato' ] }
]

コードの仕組み

この関数では、まず結果を格納する空の配列 res と、グループを管理するためのオブジェクト map を用意します。forループで各要素を順番に処理し、その要素の type プロパティがまだ map に存在しない場合は、{ type: ..., foods: [] } という新しいグループオブジェクトを作成して結果配列に追加します。その後、該当するグループの foods 配列へ食品名を push していきます。

なお、モダンなJavaScriptでは Array.prototype.reduce() や比較的新しい Object.groupBy() を使うことで、より簡潔に同じ処理を実現することも可能です。