JavaScriptで配列から頻度オブジェクトを構築する方法

本記事では、リテラル値の配列を受け取り、その配列をもとにオブジェクトを構築して返すJavaScript関数の実装方法を解説します。

生成されるオブジェクトのキーには配列内の一意な要素が入り、その値には各要素が配列内に出現した回数が格納されます。いわゆる「頻度マップ（出現回数カウント）」と呼ばれるものです。

コード例

以下は、forループを使って配列を走査し、各要素の出現回数を数えるシンプルな実装例です。

const arr = [4, 6, 3, 1, 5, 8, 9, 3, 4];

const findFrequency = (arr = []) => {
  const map = {};
  for (let i = 0; i < arr.length; i++) {
    const el = arr[i];
    if (map.hasOwnProperty(el)) {
      map[el]++;
    } else {
      map[el] = 1;
    }
  }
  return map;
};

console.log(findFrequency(arr));

実行結果

コンソールへの出力は次のようになります。

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

コードの仕組み

この関数の動作を簡単に整理すると、以下の流れになります。

• まず、出現回数を格納するための空オブジェクトmapを用意します。
• forループで配列の各要素を順番に取り出します。
• hasOwnProperty()メソッドで、その要素がすでにmapのキーとして存在するかどうかを判定します。
• 存在する場合はカウントを+1し、存在しない場合は新たにキーを作成して1を設定します。
• 最後に完成したmapオブジェクトを返します。

代替手法：reduce()を使った書き方

より関数型プログラミングらしいアプローチとしては、配列のreduce()メソッドを利用する方法もあります。

const findFrequency = (arr = []) =>
  arr.reduce((map, el) => {
    map[el] = (map[el] || 0) + 1;
    return map;
  }, {});

console.log(findFrequency([4, 6, 3, 1, 5, 8, 9, 3, 4]));
// { '1': 1, '3': 2, '4': 2, '5': 1, '6': 1, '8': 1, '9': 1 }

(map[el] || 0)という書き方により、キーが未登録の場合は0を初期値として扱い、そこへ+1することで、条件分岐を一行にまとめられます。

まとめ

このように、空のオブジェクトを用意して配列を走査しながら出現回数を記録していけば、簡単に頻度オブジェクトを構築できます。要素の重複チェックや集計処理など、さまざまな場面で応用できる基本的かつ重要なテクニックなので、ぜひ覚えておきましょう。