【JavaScript】Array.mapでArray＜object＞を作りたい

前提

・ES2015（アロー関数を使用） ※アロー関数については、この記事が分かりやすい。

やりたいこと

・単純な配列や、オブジェクトの配列などから、新たなオブジェクトの配列を作りたい。 ・（他の部分はアロー演算子に統一されているなどで）ES2015で導入されたアロー関数を使ってモダンな書き方をしたい。

問題

通常のArray.map()は以下のように使う（リファレンスより）

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

しかし、この記法は本来return文を使って書くものを省略した形での記法となります。

以下、省略なしの形となります。

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => {return x * 2});

console.log(map1);
// expected output: Array [2, 8, 18, 32]

この形にする問題が見えてきますね。 この{}は、果たしてobjectを示すものなのか、それとも別のもの（上記は関数を示す）なのか判別出来なくなってしまいました。 さあ困ったというわけですが、解決方法は用意されているのです！

解決方法

解決方法は、オブジェクトを返すことを明示的に示すために、{}を()で囲うというシンプルなもの （備忘もかねて、オブジェクトのkeyに変数を使うやり方で書いています。）

const array = [
  {"key": "k1", "value": "v1"},
  {"key": "k2", "value": "v2"},
  {"key": "k3", "value": "v3"},
];
// ES2015以降は、[]で囲めば変数で使える。それ以前はブラケット記法で追加するので辛い。。
const objects = array.map(obj => ({ [obj.key] : obj.value }));

console.log(objects);
// [ { k1: "v1" }, { k2: "v2" }, { k3: "v3" } ]

参考ページ

https://hfuji.hatenablog.jp/entry/2016/06/28/232820

※上記ページはArray.mapの基本的な使い方もまとめられているので、使い方が怪しい方は目を通すと理解が進むと思います。

きっちり学びたい人は、定番ですがオライリー本がおすすめです。