Help us understand the problem. What is going on with this article?

【JavaScript】map関数を用いたおしゃれな配列処理

More than 1 year has passed since last update.

はじめに

決まった繰り返し処理といえばforですが、JavaScriptのES6以降ではmap関数を使ってもっと簡単でおしゃれな書き方で書けます。

map関数は各要素に対して決まった繰り返し処理をして、新しい配列を生成するのに使える便利な関数です

例として、[1,2,3,4,5,6]といったような各要素を二乗した配列を作ることを考えます。

通常のfor文から書き換え

まずは通常の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で修正するとこうなります。

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を複数生成するのに便利だったりします。

参考

この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。

codeship_tech
池袋のプログラミングスクールCodeShipが、プログラミング初心者〜中級者向けにプログラミング学習でよくある質疑応答などを解説。普段、授業内で行われる生徒と現役エンジニア講師の質疑応答の一部を抜粋または参考にして読者に共有しています。
https://code-ship.wemotion.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away