【JavaScript】unitプロパティが同じオブジェクトをグループ化してbrandを結合する方法

はじめに

JavaScriptで配列内のオブジェクトを特定のプロパティの値ごとにグループ化したいケースはよくあります。本記事では、unitプロパティが同じ値を持つオブジェクトを1つにまとめ、brandプロパティをカンマ区切りで結合する方法を解説します。

元データの例

まず、次のようなオブジェクトの配列を考えてみましょう。

const arr = [
    {unit: 35, brand: 'CENTURY'},
    {unit: 35, brand: 'BADGER'},
    {unit: 25, brand: 'CENTURY'},
    {unit: 15, brand: 'CENTURY'},
    {unit: 25, brand: 'XEGAR'}
];

この配列に対して、「unitプロパティの値が等しいオブジェクト同士を1つのオブジェクトにまとめ、それぞれのbrandの値を結合する」関数を作成します。

期待される出力は以下の通りです。

const output = [
    {unit: 35, brand: 'CENTURY, BADGER'},
    {unit: 25, brand: 'CENTURY, XEGAR'},
    {unit: 15, brand: 'CENTURY'}
];

実装のアプローチ

処理の流れは次のようになります。

1. 配列全体をループで走査します。
2. ヘルパー関数を使って、結果配列の中に同じunit値を持つオブジェクトがすでに存在するかを検索します。
3. 存在する場合は、そのオブジェクトのbrand値に現在のbrand値を連結して追加します。
4. 存在しない場合は、新しいオブジェクトとして結果配列にpushします。

サンプルコード

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

const arr = [
    {unit: 35, brand: 'CENTURY'},
    {unit: 35, brand: 'BADGER'},
    {unit: 25, brand: 'CENTURY'},
    {unit: 15, brand: 'CENTURY'},
    {unit: 25, brand: 'XEGAR'}
];

// 指定したunit値を持つ要素のインデックスを返すヘルパー関数
const indexOf = function(unit){
    return this.findIndex(el => el.unit === unit)
};
Array.prototype.indexOf = indexOf;

// グループ化を行う関数
const groupArray = arr => {
    const res = [];
    for(let i = 0; i < arr.length; i++){
       // 同じunit値を持つ要素が結果配列にあるか確認
       const ind = res.indexOf(arr[i].unit);
       if(ind !== -1){
          // 存在する場合：brand値をカンマ区切りで連結
          res[ind].brand += `, ${arr[i].brand}`;
       }else{
          // 存在しない場合：新しいオブジェクトとして追加
          res.push(arr[i]);
       }
    };
    return res;
};
console.log(groupArray(arr));

実行結果

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

[
    { unit: 35, brand: 'CENTURY, BADGER' },
    { unit: 25, brand: 'CENTURY, XEGAR' },
    { unit: 15, brand: 'CENTURY' }
]

補足：よりモダンな書き方（reduceを使う）

上記のコードではArray.prototype.indexOfを上書きしていますが、既存メソッドの変更は避けた方が安全です。代わりに、reduce()やMapオブジェクトを活用すると、よりシンプルかつ安全に実装できます。

const groupArray = arr => {
    const map = new Map();
    for(const {unit, brand} of arr){
       if(map.has(unit)){
          map.get(unit).brand += `, ${brand}`;
       }else{
          map.set(unit, {unit, brand});
       }
    }
    return [...map.values()];
};
console.log(groupArray(arr));

Mapを使うことで、キーの検索が高速になり（計算量O(1)）、大規模なデータセットでも効率的に動作します。用途に応じて使い分けてください。