Meguro.es # 21 @ ビザスク で紹介されていた ES2019 の flatMap の具体的な用途がパっと思いつかず、少し調べたり聞いたりしてみました。
ちなみに flatMap は IE や Edge 以外のブラウザではすでに使えますが、まだ Stage3 のプロポーザルです。（2019/06/07現在）
Array.prototype.flatMap & Array.prototype.flat (公式ドキュメント)
flat & flatMap array methods - Can I use
flatMap とは
Array.prototype.map と Array.prototype.flat の合わせ技。
[1, 2, 3].flatMap(x => [x, x, x]); // [1, 1, 1, 2, 2, 2, 3, 3, 3]
// 以下でも同じ結果になる --> [1, 2, 3].map(x => [x, x, x]).flat();
どんなときに使うのか考えてみた
flatMap を使えば、ある Array の各値をチョキチョキして新しい Array をたくさん作り、できた Array たちを１つの Flat な Array にできる。
例えば、売れ筋商品の購入者一覧を取り出すとか。
const targetUsers = popularItems.flatMap(item => item.buyers);
// 実際に使うときは User ID などの Array に変換してから重複するユーザーを削除したりが必要かも
例えば、その購入者のウィッシュリストにある商品一覧を取り出すとか。
const wishListItems = targetUsers.flatMap(user => user.wishLists.flatMap(list => list.items));
// 実際に使うときは(ry
まとめ
結構いろんな場面で活躍しそう。
意識して使うというよりは map(func).flat() みたいなコードを見つけたら flatMap にリファクタリングして効率良く処理してもらおう！みたいな感じでしょうか。
他にもこんな使い方できそう（した）とかがあればコメントをもらえると嬉しいです。