flatMap()で変換と平坦化を同時に行おう

このレッスンでは、配列の.flatMap()メソッドを使い、変換と平坦化を1回でまとめて行う方法を学ぶことを目標にします。「JavaScript flatMap 使い方」で検索している方向けの内容です。

.flatMap()は、.map()で変換してから.flat()で1段階平坦化する処理を、1回でまとめて行うメソッドです。「1つの要素から複数の要素を作りたい」ときに便利です。.map().flat()と書くよりも短く、意図もはっきり伝わるコードになります。

サンプルコードでは、複数の文章が入った配列を.flatMap((s) => s.split(" "))で単語ごとの1つのリストに変換し、数値の配列を.flatMap((n) => [n, n * 2])で「元の値とその2倍」を含む新しい配列に変換しています。1つの要素から複数の要素を生み出す、という発想が通常のmapとの違いです。

初心者がよくつまずくのが、.flatMap()と.map()の使い分けです。1つの要素を1つの値に変換するだけならmapで十分ですが、1つの要素から複数の要素(配列)を生み出したい場合はflatMapを使う必要があります。用途を見極めて正しいメソッドを選びましょう。

文章を単語ごとに分解して1つのリストにまとめたい場合など、変換と展開を同時に行いたい場面でコードをすっきりさせられます。配列を扱う処理をどんどん短く書けるようになる、実務でも重宝するメソッドの1つです。