JavaScriptで配列内のユニークな要素の出現回数を数える方法

JavaScriptで、配列内に含まれるユニークな（重複していない）要素をすべて数える関数を作成する必要があります。この関数は、配列内の各ユニークな要素とその出現回数を対応付けたオブジェクトを返すように設計します。

それでは、具体的なコードを見ていきましょう。

実装例：forループを使った方法

まずは基本的なforループを使った実装です。

const arr = ["hi", "hello", "hi"];
const countUnique = arr => {
    const counts = {};
    for (var i = 0; i < arr.length; i++) {
        counts[arr[i]] = 1 + (counts[arr[i]] || 0);
    };
    return counts;
};
console.log(countUnique(arr));

このコードのポイントは、空のオブジェクトcountsを用意し、配列を順番に走査しながら各要素の出現回数を記録している点です。counts[arr[i]] || 0という書き方により、まだ一度も登場していない要素の場合は0からカウントを開始するため、初回アクセス時のエラーを回避しつつ正しく集計できます。

別の方法：reduceを使った簡潔な実装

同じ処理は、reduceメソッドを使うことでより短く書くことも可能です。

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

console.log(countUnique(["hi", "hello", "hi"]));
// { hi: 2, hello: 1 }

reduceを使うとアキュムレータ（累積オブジェクト）に対して直接集計できるため、コードがスッキリし、宣言的なスタイルになります。

出力結果

どちらの方法でも、コンソールには次のような結果が出力されます。

{ hi: 2, hello: 1 }

この結果から、「hi」が2回、「hello」が1回出現していることが一目でわかります。用途やコードベースのスタイルに応じて、forループ版かreduce版を選択するとよいでしょう。