JavaScriptで配列の要素をデータ型ごとにグループ化する方法

はじめに

JavaScriptでは、数値・文字列・真偽値など異なるデータ型が混在する配列を扱う場面があります。本記事では、そのような配列を受け取り、「データ型名をキー」「その型に属する要素の配列を値」とするオブジェクトを返す関数の実装方法を解説します。

問題の概要

混合データ型の配列を引数として受け取り、各要素をtypeof演算子で判定して、同じデータ型同士をまとめたオブジェクトを返す関数を作成します。

実装コード

const arr = [1, 'a', [], '4', 5, 34, true, undefined, null];
const groupDataTypes = (arr = []) => {
    const res = {};
    for(let i = 0; i < arr.length; i++){
        const el = arr[i];
        const type = typeof el;
        if(res.hasOwnProperty(type)){
            res[type].push(el);
        }else{
            res[type] = [el];
        };
    };
    return res;
};
console.log(groupDataTypes(arr));

コードの解説

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

• 結果を格納するための空オブジェクト res を用意します。
• forループで配列の各要素を順番に取り出し、typeof 演算子でデータ型名（文字列）を取得します。
• hasOwnProperty() を使って、その型のキーがすでに存在するか確認します。
• 存在すれば既存の配列に push() で追加し、存在しなければ新しい配列を作成します。
• 最後に完成したオブジェクトを返します。

実行結果

上記のコードをコンソールで実行すると、次のような出力が得られます。

{
    number: [ 1, 5, 34 ],
    string: [ 'a', '4' ],
    object: [ [], null ],
    boolean: [ true ],
    undefined: [ undefined ]
}

注意点：nullは「object」になる

出力結果を見ると、null が object グループに分類されていることがわかります。これはJavaScriptの仕様によるもので、typeof null は歴史的な経緯から "object" を返します。厳密にnullを区別したい場合は、以下のように判定を追加すると良いでしょう。

const type = el === null ? 'null' : typeof el;

reduceを使った別の実装例

より関数型的なアプローチとして、Array.prototype.reduce() を使うこともできます。

const groupDataTypes = (arr = []) =>
    arr.reduce((acc, el) => {
        const type = typeof el;
        (acc[type] ||= []).push(el);
        return acc;
    }, {});

こちらの書き方では、論理代入演算子 ||=（ES2021以降）を利用することで、キーの有無チェックを簡潔に記述できます。

まとめ

typeof 演算子とオブジェクトを組み合わせることで、混合データ型の配列を簡単にグループ化できます。ただし null や配列など、typeofだけでは正確に判定できないケースがある点には注意が必要です。用途に応じて判定ロジックを拡張して活用してください。