JavaScriptで配列をオブジェクトに変換する方法【サンプルコード付き】

JavaScriptでは、オブジェクトの配列を「特定のプロパティをキーとしたオブジェクト」へ変換したい場面がよくあります。本記事では、id をキー、name を値とするオブジェクトを生成する方法を、具体的なサンプルコードとともに解説します。

変換元となるデータ

例として、次のようなオブジェクトの配列を用意しました。

const arr = [
    { id: 1, name: "Mohan" },
    { id: 2, name: "Sohan" },
    { id: 3, name: "Rohan" }
];

要件

この配列を受け取り、各要素の id プロパティをキー、name プロパティを値とするオブジェクトを返す関数を作成します。

期待される出力は以下の通りです。

const output = {
    1: { name: "Mohan" },
    2: { name: "Sohan" },
    3: { name: "Rohan" }
};

実装例1：forループを使う方法

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

const arrayToObject = arr => {
    const res = {};
    for (let i = 0; i < arr.length; i++) {
        res[arr[i].id] = {
            name: arr[i].name
        };
    }
    return res;
};

console.log(arrayToObject(arr));

空のオブジェクト res を用意し、ループで配列を順番に処理しながら、各要素の id をキーとして新しいオブジェクトを格納していきます。最後に res を返すことで変換が完了します。

実行結果

コンソールには次のように表示されます。

{
    '1': { name: 'Mohan' },
    '2': { name: 'Sohan' },
    '3': { name: 'Rohan' }
}

なお、JavaScriptのオブジェクトキーは常に文字列として扱われるため、数値の id も '1' のような文字列キーになります。これは仕様通りの動作です。

実装例2：reduce()を使う方法

より簡潔に関数型的に書きたい場合は、Array.prototype.reduce() を使うのがおすすめです。

const arrayToObject = arr =>
    arr.reduce((acc, obj) => {
        acc[obj.id] = { name: obj.name };
        return acc;
    }, {});

console.log(arrayToObject(arr));

reduce() の第2引数に空のオブジェクト {} を渡し、各要素を順に蓄積していくことで、1行のチェーンで同じ結果を得られます。

まとめ

オブジェクトの配列をキー付きオブジェクトへ変換する際は、シンプルな for ループか reduce() のいずれかを選ぶとよいでしょう。可読性を重視するなら for ループ、宣言的なスタイルを好むなら reduce() が適しています。また、データ量が多い場合は、ES2019以降で利用できる Object.fromEntries() と map() を組み合わせる方法も検討してみてください。