JavaScriptでオブジェクト配列をidをキーとするオブジェクトに変換する方法

JavaScriptでは、オブジェクトの配列を「キーが各オブジェクトのプロパティ値であるオブジェクト」へ変換したいケースがよくあります。本記事では、id プロパティをキーとして使う変換方法を解説します。

前提となるデータ

まず、次のようなオブジェクトの配列を想定します。

const arr = [{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"}];

要件

この配列を受け取り、各オブジェクトの id プロパティの値をキーとしたオブジェクトを返す関数を作成します。期待される出力は以下の通りです。

const output = {1:{name:"aa"},2:{name:"bb"},3:{name:"cc"}};

ポイントは、サブオブジェクトのマッピングに使用した id プロパティそのものを、結果のサブオブジェクトから削除する点です。これにより、元データの情報が重複せず、クリーンな構造になります。

実装コード

この処理を実現するコードは以下の通りです。

const arr = [{id:1,name:"aa"},{id:2,name:"bb"},{id:3,name:"cc"}];
const arrayToObject = arr => {
    const res = {};
    for(let i = 0; i < arr.length; i++){
        const key = arr[i]['id'];
        res[key] = arr[i];
        delete res[key]['id'];
    };
    return res;
};
console.log(arrayToObject(arr));

処理の流れ

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

1. 結果を格納するための空オブジェクト res を用意します。
2. 配列の要素をループで順に取り出し、各オブジェクトの id の値を変数 key に代入します。
3. res[key] に対象のオブジェクトを格納します。
4. delete 演算子を使って、格納後のオブジェクトから id プロパティを削除します。
5. ループ完了後、res を返り値として返します。

実行結果

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

{ '1': { name: 'aa' }, '2': { name: 'bb' }, '3': { name: 'cc' } }

なお、オブジェクトのキーは文字列として扱われるため、数値の id を指定しても出力上はシングルクォート付きの文字列キー（例: '1'）として表示されます。動作上は問題なく、output[1] のようにアクセスできます。

補足：reduceを使った別解

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

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

スプレッド構文と分割代入を組み合わせることで、id 以外のプロパティだけを抽出でき、より簡潔に記述できます。用途やチームのコーディングスタイルに合わせて使い分けるとよいでしょう。