JavaScript でオブジェクトの配列の特定のキーの値を使用してオブジェクトに変換する

やりたいこと

const data = [
  {
    id: 1,
    name: 'test1',
  },
  {
    id: 2,
    name: 'test2',
  },
  {
    id: 3,
    name: 'test3',
  },
];

のようなオブジェクトの配列を、idの値をキーとする以下のようなオブジェクトに変換。

const obj = {
  1: {
    id: 1,
    name: 'test1',
  }
  2: {
    id: 2,
    name: 'test2',
  }
  3: {
    id: 3,
    name: 'test3',
  }
}

このように変換しておくことで

2 in obj

で id = 2 のデータがあるかどうかがすぐわかり、また

obj[2]

で id = 2 のデータを簡単に取得可能。

やりかた

// 変換するデータ
const data = [
  {
    id: 1,
    name: 'test1',
  },
  {
    id: 2,
    name: 'test2',
  },
  {
    id: 3,
    name: 'test3',
  },
];

// 変換したデータ
const obj = Object.assign(...data.map(item => ({ [item.id]: item })));

詳細

data.map(item => ({ [item.id]: item })

map は 配列それぞれに変換を適用するために使用するメソッドです。

ここでは item を ({ [item.id]: item }) に変換する関数を適用しています。

これによって

{
  id: 2,
  name: 'test2',
}

は

{
  2: {
    id: 2,
    name: 'test2',
  }
}

に変換されます。

{ [item.id]: item } という記述は ComputedPropertyName と呼ばれる構文を利用したもので、オブジェクトのプロパティ名を動的に設定できます。

const obj = { [item.id]: item };

は以下と同等ですが、 ComputedPropertyName は一行で記述できる点が大きなメリットです。

const obj = {};
obj[item.id] = item;

Object.assign(…[])

Object.assign は複数のオブジェクトのマージを行います。

「...」 はスプレッド構文と呼ばれ、関数呼び出しで使用することで配列が展開され、それぞれが関数の引数になります。

変換したい配列は前述の data.map によって以下のように変換されています。

[
  {
    1: {
      id: 1,
      name: 'test1',
    }
  },
  {
    2: {
      id: 2,
      name: 'test2',
    }
  },
  {
    3: {
      id: 3,
      name: 'test3',
    }
  },
];

したがって Object.assign(…[]) の個所は以下のように解釈されます。

Object.assign(
  {
    1: {
      id: 1,
      name: 'test1',
    }
  },
  {
    2: {
      id: 2,
      name: 'test2',
    }
  },
  {
    3: {
      id: 3,
      name: 'test3',
    }
  }
);

これによって最終に求めたかったオブジェクトが得られます。

{
  1: {
    id: 1,
    name: 'test1',
  }
  2: {
    id: 2,
    name: 'test2',
  }
  3: {
    id: 3,
    name: 'test3',
  }
}

補足

lodash の keyBy を使用すれば簡単です。

// 変換するデータ
const data = [
  {
    id: 1,
    name: 'test1',
  },
  {
    id: 2,
    name: 'test2',
  },
  {
    id: 3,
    name: 'test3',
  },
];

// 変換したデータ
const obj = _.keyBy(data, 'id');