map関数をわかりやすく分解してみた

個人的にJavaScriptのmap関数が{}と()がグチャグチャで分かりにくかったので分解してわかりやすくしたメモ。

#従来の書き方(for文)

list.js

const animalList = ["dog", "cat", "monkey"];

こういった配列から要素を取り出したいとき、従来の書き方だとfor文で書いていました。

for.js

for(let i = 0; i < animalList.length;i++){
  console.log(animalList[i]);
}
//出力結果　dog cat monkey

配列の要素数を取得してインデックスを0から要素分繰り返しです。

#map関数
map関数を使うとfor文よりシンプルに書けるのですが個人的に順を追って理解していかないと複雑に思えたので分解してみました。
###map関数を分解
まず基本の形「配列.map()」から。

map.js

const animalList = ["dog", "cat", "monkey"];
//配列.map()
animalList.map();

次に配列.map()の括弧内にアロー関数を入れます。

map.js

const animalList = ["dog", "cat", "monkey"];
//配列.map(アロー関数)
animalList.map(()=>{});

次にアロー関数に処理内容の記述をします。
アロー関数の引数には要素が入り、{}内に処理が入ります。
つまり__(配列から取得した要素)=>{　処理　}となります。
引数を__配列から取得した要素__と書きましたが引数には配列から取得した要素の共通の名前を定義します。
つまり、配列から取得した要素にdataと名前をつけてdataを出力する場合は(data)=>{cosole.log(data)}__となります。

今回は省略しますが第二引数は0から始まる要素番号の名前を定義できます。
上記のfor文のiにあたるものです。
__(data,key)=>{cosole.log(key + '番目は'data)}__的な処理も書けます。

一番初めに作った配列.map()のアロー関数をこの処理が書かれたアロー関数に置き換えるとmap関数の完成です。

map.js

const animalList = ["dog", "cat", "monkey"];
//配列.map((配列から取得した要素)=>{　処理　})
animalList.map((data) => {console.log(data)});
//出力結果　dog cat monkey

あまり一行にまとめている書き方は見ないような気が…
なので改行などしてよく見る形に。

map.js

animalList.map((name) => {
  console.log(name);
});

Reactのハンズオンチュートリアルなどでコンポーネントをmap関数で取り出す際に詳しく説明されていないことが多かったのでまとめてみました。