【JavaScript】オブジェクト配列内に同じキーの値を持つ要素がいくつあるか数える方法

例えば、ユーザーに関するデータを格納した、次のようなオブジェクトの配列があるとします。

const arr = [
    {
        "name": "aaa",
        "id": "2100",
        "designation": "developer"
    },
    {
        "name": "bbb",
        "id": "8888",
        "designation": "team lead"
    },
    {
        "name": "ccc",
        "id": "6745",
        "designation": "manager"
    },
    {
        "name": "aaa",
        "id": "9899",
        "designation": "sw"
    }
];

このような配列を引数として受け取り、name プロパティの各値をキーとして、その名前を持つオブジェクトが何個含まれているかを出現回数として対応付けた新しいオブジェクトを返すJavaScript関数を作成する必要があります。

そのため、上記の配列に対してこの処理を行うと、期待される出力は次のようになります。

const output = {
    "aaa": 2,
    "bbb": 1,
    "ccc": 1
};

サンプルコード

この処理を実装するコードは以下の通りです。ループ処理の中で hasOwnProperty() を使って、すでにカウント用のオブジェクトに同名のキーが存在するかどうかを判定し、存在すればインクリメント、存在しなければ1を初期値として登録します。

const arr = [
    {
        "name": "aaa",
        "id": "2100",
        "designation": "developer"
    },
    {
        "name": "bbb",
        "id": "8888",
        "designation": "team lead"
    },
    {
        "name": "ccc",
        "id": "6745",
        "designation": "manager"
    },
    {
        "name": "aaa",
        "id": "9899",
        "designation": "sw"
    }
];
const countNames = (arr = []) => {
    const res = {};
    for(let i = 0; i < arr.length; i++){
        const { name } = arr[i];
        if(res.hasOwnProperty(name)){
            res[name]++;
        }
        else{
            res[name] = 1;
        };
   };
    return res;
};
console.log(countNames(arr));

出力結果

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

{ aaa: 2, bbb: 1, ccc: 1 }

補足：reduce() を使った別の実装方法

同様の処理は、モダンなJavaScriptでは Array.prototype.reduce() を使ってより簡潔に書くこともできます。

const countNames = (arr = []) =>
    arr.reduce((acc, { name }) => {
        acc[name] = (acc[name] || 0) + 1;
        return acc;
    }, {});

console.log(countNames(arr)); // { aaa: 2, bbb: 1, ccc: 1 }

どちらの方法でも結果は同じですが、reduce() を使うことで宣言的に記述でき、コードがより短く読みやすくなります。状況に応じて使い分けると良いでしょう。