【JavaScript】同じキー値を持つオブジェクトをマージして出現回数をカウントする方法

データ処理を行っていると、「同じIDを持つ重複データを1つにまとめて、それぞれ何件ずつ存在するかを集計したい」というケースによく遭遇します。

この記事では、id プロパティの値が同じオブジェクトを1つにマージし、出現回数を count プロパティとして付与する方法を、reduce メソッドを使ったサンプルコードとともに解説します。

元となる配列

まず、次のようなオブジェクトの配列があると仮定しましょう。

const arr = [{
    "value": 10,
    "id": "111",
    "name": "BlackCat",
}, {
    "value": 10,
    "id": "111",
    "name": "BlackCat",
}, {
    "value": 15,
    "id": "777",
    "name": "WhiteCat",
}];

この配列には、id が "111" のオブジェクトが2件、"777" のオブジェクトが1件含まれています。

要件

このような配列を引数として受け取り、id プロパティの値が同じオブジェクト同士をマージして、それぞれの出現回数をカウントするJavaScript関数を作成します。

上記の配列に対して実行した場合、期待される出力は以下のようになります。

const output = [{
    "value": 10,
    "id": "111",
    "name": "BlackCat",
    "count": 2,
}, {
    "value": 15,
    "id": "777",
    "name": "WhiteCat",
    "count": 1,
}]

実装コード例

reduce メソッドを使うことで、配列を走査しながら結果を蓄積できます。すでに同じ id の要素が存在する場合は count をインクリメントし、存在しない場合は新たな要素として追加します。

const arr = [{
    "value": 10,
    "id": "111",
    "name": "BlackCat",
}, {
    "value": 10,
    "id": "111",
    "name": "BlackCat",
}, {
    "value": 15,
    "id": "777",
    "name": "WhiteCat",
}];

const combinedItems = (arr = []) => {
    const res = arr.reduce((acc, obj) => {
        let found = false;
        for (let i = 0; i < acc.length; i++) {
            if (acc[i].id === obj.id) {
                found = true;
                acc[i].count++;
            };
        }
        if (!found) {
            obj.count = 1;
            acc.push(obj);
        }
        return acc;
    }, []);
    return res;
}

console.log(combinedItems(arr));

実行結果

コンソールに出力される結果は以下の通りです。id ごとにオブジェクトがまとめられ、count に出現回数が記録されていることが確認できます。

[
    { value: 10, id: '111', name: 'BlackCat', count: 2 },
    { value: 15, id: '777', name: 'WhiteCat', count: 1 }
]

補足：より効率的な書き方

上記のコードは毎回結果配列を線形探索するため、データ量が多い場合は計算量が O(n²) になります。パフォーマンスを重視する場合は、Map やオブジェクトをキー管理用に使うことで O(n) に改善できます。

const combinedItems = (arr = []) => {
    const map = new Map();
    arr.forEach(obj => {
        if (map.has(obj.id)) {
            map.get(obj.id).count++;
        } else {
            map.set(obj.id, { ...obj, count: 1 });
        }
    });
    return [...map.values()];
}