わかりやすくJavaScriptのmap()メソッドを説明

今回は繰り返しのfor文とよく似ているmap()メソッドについて、初心者にわかりやすく説明をします。

Contents

公式説明：意義と使い方（構文）

map()メソッドについては、JavaScriptの公式リファレンスのMDN Web Docsには次のように書かれています。

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
MDN「Array.prototype.map()」

この日本語をおおざっぱに分析すると、

A：与えられた関数→なんらかの関数が必要
B：配列の→もともとのなんらかの配列が必要
C：すべての要素に対して呼び出し→（その配列の）各要素ごとに順番に呼び出された関数（コールバックと言う）が実行される
D：新しい配列を生成

ということになります。

使い方（構文）は、メソッドなのでなんらかの（配列）オブジェクトの後に「.（ピリオド）」を続けてから使います。基本的な構文は次のようになります。

新しい配列を格納する変数 = 配列オブジェクト.map( コールバック関数 );

コールバック関数とは、なんらかのメソッドや関数から呼び出される関数のことです。

では以上の点を意識しつつ、次の使用例を見てください。

See the Pen jOMzLYe by 1978works (@1978works) on CodePen.

さて、そもそもなんらかの配列が最初に必要となるので、まずは配列(ar）を作っています。この配列arは、

配列arについて

という対応になっています。

そして、「C：すべての要素に対して呼び出し→（その配列の）各要素ごとに順番に呼び出された関数（コールバック関数）が実行される」ので、まず、１番目の要素「2」に対して関数Kakezanが呼び出され（コールバックされ）、そしてKakezanの処理が実行されます。

その結果、関数Kakezanの引数であるxに「2｣が代入され、さらに2倍(2*2という式）され、その結果である「4」という数字がmap()メソッド側へ渡されます。

そして、map()メソッドが作った新しい配列（new_ar）の1番目の要素に、その｢4」を格納します。

次に配列arの2番目の要素「4」に対して関数Kakezanが呼び出され、その引数xに今度は「4」が代入され、それが2倍された結果「8」が配列new_arへ渡され、その2番目の要素として格納されます。

こういった処理が順番に、そして連続的に行われた結果、新しい配列new_arは[4,8,12,16]となり、つまりは、

新しい配列new_arについて

という配列になるわけですね。上のコードの中で、

let element=<p>新しい配列は[{new_ar[0]},{new_ar[1]},{new_ar[2]},{new_ar[3]}]です。</p>;

[0]とか[1]は、まさにnew_arが配列であることを如実にあらわしています。

・new_ar[0]は、new_arの1番目の要素である「4」
・new_ar[1]は、new_arの2番目の要素である「8」

というわけです。

配列を使って、新しい配列を作り出す。これがmap()メソッドの役割となります。

for文を利用しても同じ結果を作り出すことは可能ですが、おそらく多くの場合でmap()メソッドを使ったほうが表記が簡略化できると思います。

なお、上記公式リファレンスのMDNには、map()メソッドを使うべきではない場面として、

と書かれています。

map()メソッドの基本的なことさわかれば、これらの注意点も含めて公式リファレンスの説明も「意味不明な日本語」から「なんとなくわかる」へ変化すると思いますので、ぜひ公式リファレンスも読み込んで見てください。