こんにちは、フロントエンドエンジニアのザワです。
気候や季節に影響されやすいので、夏にArrayという文字を見ると、「オーレーイ！」とラテンなノリで叫び出したくなる私です。
さて、今回のArrayシリーズは、Array.prototype.mapを取り上げます。
前回のspliceメソッドのとき、玄人感があるメソッドという風に紹介しました。今回のmapメソッドも玄人向け、というより、使ってるソースコードを見かけると、コイツ、デキると思ってしまうメソッドです。
後述しますが、配列をちゃかちゃかして新しい配列を作成するメソッドです。なので、APIからの値をごにょごにょして扱いやすい配列に整形するなど、使いこなせばなかなか活躍するシーンがあるのではないか、と期待させるヤーツです。
それでは、デキるエンジニアを目指すためにmapメソッドを学んでいきましょう。
※ ここからの説明は個人的に調べて解釈したざっくりとした説明になります。詳しく知りたい方はこちらへどうぞ
Array.prototype.map()メソッドとは
mapの引数にはコールバック関数を指定して、元の配列の一つひとつの要素に対して、その関数を実行し、各戻り値で新しい配列を作るメソッドです。
どうでしょう？ わりと説明から何をするメソッドなのかは理解できそうです。
しかし、汎用的な匂いがプンプンするので、使い手によってセンスが問われそうで怖いです。それでは探っていきましょう。
実装例文
では例文の説明をしていきます。
今回は、1日に摂取する糖質の量を例に取り上げます。ダイエットしたいのでしょうか。
さて、私の1食の糖質摂取量の目安が130gとします。sugarValues変数は、1日の各食事の糖質量を格納している配列です。毎食130g取ればいいものを、「わんぱくでもいい、たくましく育ってほしい」という、昔のCMのセリフが頭をよぎって、毎食2倍の量を食べてしまったケースを表しています。
sugarTotal変数には、朝・昼・晩、食事毎の糖質量に対して2倍して新たに作成した配列が格納されています。
See the Pen
Array.prototype.map() sample1 by Zawa (@sowork)
on CodePen.
次に、前の例のように単純な配列ではなく、オブジェクトを格納した配列を元に、新しい配列を作成してみたいと思います。
See the Pen
Array.prototype.map() sample2 by Zawa (@sowork)
on CodePen.
mapメソッドのコールバック関数では、私生活でよくやりがちな、朝、昼は順調に目安量を守っていたのに、夜に欲望に負けたパターンを表しています。
夜だけ3倍の糖質を摂取していたことになっています。山盛りライスが止まらないタイプの焼肉にでもいったのでしょうか。
「わんぱくでもいい、たくましく育ってほしい」と架空のわんぱくお兄さんが耳元で囁いてきます。Object.values()は、オブジェクトのプロパティを指定せずに値だけ欲しかったので使用しています。
終わりに
今回はmapメソッドについてお勉強しました。夏真っ盛りに執筆したので、いつもよりテンションが高い状態にあり、ペンがよく進みました。
頭の中ではもう1人の自分がマタドールの衣装をまとい、同じ空間にはフラメンコダンサーがいて、激しく妖艶な踊りを私に見せてくれていました。覚醒状態とはこういった現象をいうのでしょうか。オーレーイ！
それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
