配列内の一意な要素をカウントするJavaScript関数の実装方法

本記事では、配列内に含まれる一意（ユニーク）な要素をすべてカウントするJavaScript関数の作成方法を解説します。この関数は、配列内の各一意な要素とその出現回数を対応付けたオブジェクトを返します。

要件の概要

例えば、次のような文字列の配列があったとします。

const arr = ["hi", "hello", "hi"];

この場合、期待される出力は「hi」が2回、「hello」が1回出現していることを示すオブジェクトになります。

コード例

以下がその実装コードです。

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));

仕組みの解説

この関数の動作を順に見ていきましょう。

1. 空のオブジェクトを用意：まず、各要素の出現回数を記録するための空オブジェクト counts を作成します。

2. ループで各要素を走査：forループを使って配列の各要素にアクセスし、その要素をキーとしてオブジェクトに登録します。すでにキーが存在する場合は前回の値に1を加算し、存在しない場合は (counts[arr[i]] || 0) の部分が0を返すため、初期値の1が設定されます。

3. 結果を返却：ループ完了後、各一意な要素とその出現回数をまとめたオブジェクトを返します。

実行結果

上記のコードを実行すると、コンソールには以下のように出力されます。

{ hi: 2, hello: 1 }

応用：reduceメソッドを使った別の書き方

よりモダンなアプローチとしては、reduce() メソッドを利用することもできます。

const countUniqueReduce = arr => {
    return arr.reduce((acc, item) => {
        acc[item] = (acc[item] || 0) + 1;
        return acc;
    }, {});
};
console.log(countUniqueReduce(arr)); // { hi: 2, hello: 1 }

どちらの方法でも同じ結果が得られますが、reduce() を使うことで簡潔に関数型スタイルで記述できる点がメリットです。状況に応じて使い分けるとよいでしょう。