配列をオブジェクトに一発で変換する方法

始めに

JSはmapだのfilterだのあって、forループを回さずとも配列に一括操作ができて非常に良いのですが、オブジェクトに対してはそういうのが無くてもどかしく感じることがあります。
例えば以下のような配列からオブジェクトに変換する場合です。

配列からオブジェクトに変換

const items = [
  { key: 'a', value: 1 },
  { key: 'b', value: 2 },
  { key: 'c', value: 3 },
];
 
const obj = {}; // できればこういう事前に宣言してから代入みたいなことを書きたくない
items.forEach((item) => {
  obj[item.key] = item.value;
});

配列からオブジェクトに一発で変換する方法

少しだけ難しいですが、Object.assignと配列の展開を使うと上手くいきます。
※Object.assignはIE非対応なので、IEも使う場合はlodashの関数を使うといいと思います。

配列からオブジェクトに一発で変換する

const items = [
  { key: 'a', value: 1 },
  { key: 'b', value: 2 },
  { key: 'c', value: 3 },
];
 
// 配列からkeyが1つのオブジェクトに変換し、
// Object.assignでオブジェクトのkey-valueデータを全部まとめる
const obj = Object.assign({}, ...items.map((item) => ({
  //[item.key]: item.value,  ←なぜか表示されないのでコメントアウトで書きます＞＜
  [item.key]: item.value,
})));

/*
[
  { a: 1 },
  { b: 2 },
  { c: 3 },
]
という一つ一つのkey-valueを1つにまとめるという感じです。畳み込むというイメージでしょうか。
 */

終わりに

上記のやり方によって空オブジェクトの生成はされず直接目的のオブジェクトを生成して代入することができました。
ちょっと難しいですが、これをイディオムとして使っていくとコードがスッキリしていくと思うので参考にしていただけると幸いです。