JavaScriptで配列内の最頻出要素（最も多く出現するアイテム）を取得する方法

JavaScriptでは、数値や文字列などのリテラル値を含む配列を扱うことがあります。その中には同じ値が何度も繰り返し登場することもあるでしょう。

本記事では、配列内で最も多く出現する要素を返す関数の作成方法を解説します。

問題の概要

たとえば、次のような入力配列があったとします。

const input = ['a', 'v', 'k', 'f', 'a', 'f', 's', 'd', 'd', 'f', 'a', 'j',
'a'];

この場合、期待される出力は次のとおりです。

'a'

理由は単純で、文字 'a' が他のどの要素よりも多く出現しているからです。

実装のアプローチ

この問題を解決するために、Map() オブジェクトを使用して「各要素とその出現回数」を記録していきます。すべての要素を走査した後、最も出現回数が多い要素を返すという流れです。

reduce() を活用すれば、カウント処理と集計処理を簡潔に記述できます。

コード例

const input = ['m', 'a', 'v', 'k', 'f', 'a', 'f', 's', 'd', 'd', 'f', 'a',
'j', 'a'];
const findMaximum = arr => {
   const map = arr.reduce((acc, val) => {
      let count = acc.get(val);
      if(count){
         acc.set(val, ++count);
      } else {
         acc.set(val, 1);
      };
      return acc;
   }, new Map());
   return Array.from(map).reduce((acc, val) => {
      if(val[1] > acc[1]){
         return val;
      };
      return acc;
   }, [0, 0])[0];
};
console.log(findMaximum(input));

コードの解説

このコードの処理の流れは以下のとおりです。

ステップ1： 最初の reduce() で配列を順番に走査し、各要素をキーとして Map に登録します。すでに存在する要素であればカウントを1つ増やし、初めて出現した要素であればカウントを1に設定します。

ステップ2： Array.from(map) で Map を [要素, 出現回数] のペア配列に変換し、2つ目の reduce() で出現回数が最大となるペアを特定します。

ステップ3： 最終的に、最大出現回数を持つ要素だけを取り出して返します。

実行結果

コンソールに出力される結果は次のとおりです。

a

このように、Map と reduce() を組み合わせることで、配列内の最頻出要素を効率的かつ読みやすく取得できます。同様の手法は、アンケート結果の集計やログデータの分析など、出現頻度を扱うさまざまな場面で応用できます。