【今日のQ&A】関数を用いた配列処理【JavaScript】

こんにちは、@codeship_techです。

今回はpythonやjavascriptなどでも頻出するmap関数についてのQ&Aです！

配列のmap関数って何ですか？

各要素に対して決まった繰り返し処理をして、新しい配列を生成するのに使える便利な関数です。決まった繰り返し処理といえばforですが、JavaScriptのEES5以降ではもっと簡単でおしゃれな書き方で書けます。[1,2,3,4,5,6]といったような各要素を二乗した配列を作ることを考えます。
まずは通常のfor文で書いてみます。

const list = [1,2,3,4,5,6];
const newList = [];

for(let i = 0; i< list.length ; i++){
newList[i] = list[i]*list[i];
}

console.log(newList); //[1,4,9,16,25,36]

list[i]が煩わしい気がします。
これをforEach文で書き直すとこうなります。

const list = [1,2,3,4,5,6];
const newList = [];

list.forEach(function(item, index){
newList[index] = item*item;
}

console.log(newList);

newListの宣言が煩わしい気がします。
これをmapで修正するとこうなります。

js
const list = [1,2,3,4,5,6];

const newList = list.map(function(item){
return item*item;
});

console.log(newList) //[1,4,9,16,25,36]

returnされたものが新しい配列の要素一つになります。
「新しい配列はlistから生成するんだ」ということが一瞬で伝わって、非常にすっきり書けていますね。
「自分自身を更新(して複製)」する時にMapは便利です。
これを使うとReactのDOMを複数生成するのに便利だったりします。