【初心者向け】JavaScriptで配列内の全要素の出現頻度マップを作成する方法

配列の要素ごとの出現回数をカウントする

数値や文字列を含む配列には、重複した要素が含まれていることがあります。このような場合、各要素が配列の中に何回登場するのか（出現頻度）を調べたいというニーズはよくあります。

この問題に対する最もシンプルで実用的な解決策は、「要素名をキー、出現回数を値」とするオブジェクトを返すことです。これにより、あとから特定の要素の頻度を簡単に参照できるようになります。

実装のアプローチ

処理の流れは以下の通りです。

• forEach() ループを使って配列を順番に走査します。
• オブジェクト内にその要素のキーがすでに存在する場合は、カウントを1つ増やします。
• 存在しない場合は、その要素を新しいプロパティとして追加し、初期値を 1 に設定します。
• すべての走査が終わったら、完成したオブジェクトを返します。

サンプルコード

この問題を解くコード全体は以下のようになります。

const arr = [2,5,7,8,5,3,5,7,8,5,3,4,2,4,2,1,6,8,6];
const getFrequency = (array) => {
    const map = {};
    array.forEach(item => {
        if(map[item]){
            map[item]++;
        }else{
            map[item] = 1;
        }
    });
    return map;
};
console.log(getFrequency(arr));

実行結果

コンソールには次のような出力が表示されます。

{ '1': 1, '2': 3, '3': 2, '4': 2, '5': 4, '6': 2, '7': 2, '8': 3 }

補足：より簡潔に書く方法

上記のコードは if / else 文を使っていますが、論理演算子や Map オブジェクトを使えばさらに簡潔に書くこともできます。例えば、次のように短縮できます。

const getFrequency = (array) => {
    const map = {};
    array.forEach(item => {
        map[item] = (map[item] || 0) + 1;
    });
    return map;
};

map[item] || 0 の部分は、キーがまだ存在しない場合に undefined を 0 として扱うことで、条件分岐を不要にしています。状況に応じて読みやすい方を選択するとよいでしょう。