魔法JS☆あれい 第10話「もうmapにもforEachにも頼らない」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

第1部「ミューテーター・メソッド編」
* 第1話「popでpushした、ような……」
* 第2話「shiftはとってもunshiftって」
* 第3話「もうsortもreverseも怖くない」
* 第4話「fillも、spliceも、copyWithinもあるんだよ」

第2部「アクセサ・メソッド編」
* 第5話「joinなんて、concatなわけない」
* 第6話「indexOfなの絶対lastIndexOf」
* 第7話「includesのsliceと向き合えますか？」

第3部「イテレーション・メソッド編」
* 第8話「filterって、ほんとfindとfindIndex」
* 第9話「someなの、everyが許さない」

map()

イテレー太「さあ、引き続き戦いの真っ最中だよ！」
あれい「いつまで続くんだよこの駄犬」
イ「召喚したデータは第8話を参照してね！　そして、今回の敵の弱点は、『記事のタイトル（title）と使用されているタグ（tags）の名前（name）を一覧にしたもの』だよ！」
あ「要は見出しか」
イ「そうだよ！　さあ、記事の見出しをreturnして敵を倒してよ！」
あ「面倒くせえなあ……」

return items.map(item => `${item.title} (${item.tags.map(tag => tag.name).join('/')})`)

あ「これでいいのか」
イ「あれい、今回も解説をお願い！」
あ「ああん？　面倒くせえなあ……だから、map() メソッドですべての記事にアクセスしてtitleとtagsを取得するだろ」
イ「ふむふむ」
あ「で、さらにtags内のすべての要素にmap() メソッドでアクセスして、nameのみの配列を作成してから、それをjoin()メソッドで連結してるんだよ」
イ「いやー、さすがはあれい！　魔法少女コスが壊滅的に似合わないけど仕事は早いね！」
あ「しばくぞ」

解説

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

（MDNより）

配列のすべての要素に対してコールバック関数を実行し、返ってきた結果で新しい配列が作成されます。
コールバック関数では、filter() メソッドと同じく、「現在の要素、現在の要素のインデックス、元の配列」という3つの引数を使用できます。

forEach()

解説

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

（MDNより）

さて、forEach() メソッドについては解説のみとなります。なぜなら、forEach() メソッドには戻り値がないため、敵に攻撃できないからです。
配列のすべての要素に対して関数を実行する……という点ではmap() メソッドなどと同じ動きをしますが、戻り値がないのでメソッドチェーンとして使用しづらく、map()やreduce()を使わずにあえてforEach() を使うというケースが、正直言って思いつきません。
（……逆に言うと、他のオブジェクトであるMapやSetではforEach()くらいでしか反復処理ができないけど、Arrayオブジェクトは便利なメソッドが豊富に揃っていて幸せだなー、という事なんでしょうね。多分……）

あ「なんだこの試合放棄感丸出しの解説は」
イ「一応、記事のタイトルを順にコンソールに出力する例だけでも提示しておいてよ！」
あ「面倒くせえなあ……」

items.forEach(item => console.log(item.title));

次回予告

ずっと配列の要素達にコールバック関数を実行しながら、あなたは何も感じなかったの？
皆がどんな風にアキュムレータに代入されたか、わかってあげようとしなかったの？

第11話 最後に残ったreduceとreduceRight