【javascript】アロー関数を使ってmap関数をスマートに使う

配列に対してforでごにょごにょすることが多いためmap関数について調べてみたところ、見事に泣きそうになったので、学習記録を整理しておきます。

map関数とは

「配列内のすべての要素に対して、同じ処理を加えた新しい配列を返す」関数。

たとえば、

array1 = [0,1,2,3,4,5]

があったとして、全部の数を二倍した新しい配列

array2 = [0,2,4,6,8,10]

を作りたいときに、forでぶんまわしてごにょごにょしないでも、一行で新しい配列を作れます。便利～

STEP0：map関数の「基本的な」使い方

var func = function nibai(value){return value * 2};

var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(func);
console.log(newArray); // =>[2,4,6,8,10]

１：引数を一つ取り、引数を二倍にして返すnibai関数を作り、変数funcに代入する
２：baseArrayを作る
３：baseArrayのmapメソッドを使い、引数として１で作った関数（を代入した変数func）を渡す
４：mapメソッドが、配列の中身を一つずつnibai関数に渡して結果を受け取る（←ここが外から見えにくいので混乱しがち）
５：すべての値が２倍になった配列が得られる

STEP1：関数を別に定義するのが面倒なので、無名関数を使う

var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(function(value){return value * 2});
console.log(newArray); // =>[2,4,6,8,10]

ちなみに、map関数の使い方でググると、大体のサンプルはここをスタートとして書いてある。
が、ここがスタートだと、無名関数滅びろ教のへっぽこSEには、「無名関数の引数valueはどこから出てきた？？？」ということが理解できなかった。無名関数滅びろ。

STEP2：無名関数でも増長なので、ナウいアロー関数を使うために、アロー関数の書き方を学ぶ

アロー関数がナウいね！とはよく聞くんですが、いまいちよくわからないので整理します。

０：まず基本のfunctionの書き方。

let sample = function(value){return value * 2};

１：アロー（=>）を使って「function」を省略

let sample = (value) => { retrun value * 2};

２：{}の中が一行なら、returnも{}も省略できる

let sample = (value) => value * 2;

３：引数が１つなら、()も省略できる

let sample = value => value * 2;

これでよく見るアロー関数の出来上がり。

アロー関数にはそのほかにも普通のfunctionと挙動が違う部分があるらしいけど、へっぽこなので、その辺はまた今度必要になったら学習します。

STEP3：map関数にアロー関数を使う

おさらい：普通の書き方

var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(function(value){return value * 2});
console.log(newArray); // =>[2,4,6,8,10]

funcitonを省略

var baseArray = [1,2,3,4,5];
var newArray = baseArray.map((value) => {return value * 2});
console.log(newArray); // =>[2,4,6,8,10]

関数一行なので、returnと{}を省略

var baseArray = [1,2,3,4,5];
var newArray = baseArray.map((value) => value * 2);
console.log(newArray); // =>[2,4,6,8,10]

引数１個なので、()も省略

var baseArray = [1,2,3,4,5];
var newArray = baseArray.map(value => value * 2);
console.log(newArray); // =>[2,4,6,8,10]

これで、よく見るサンプルの出来上がり。