【初学者必見】JavaScirptのmap()の使い方を解説します

本日は



【初学者必見】JavaScirptのmap()の使い方を解説します



というテーマの記事です。

こんな方にオススメの記事です

上記の疑問を解決する記事となっていますので是非ご覧ください♪

この記事を書いている人

map()とは何か

早速ですが結論からです。

map()は、ある配列に何らかの処理を加えた上で新しい配列を作る事が出来るメソッドとなっています。

出典元MDN

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

出典元　MDN

例えばある配列の要素全てに同じ値を掛け算したり足し算したりしたい場合などに有効なメソッドとなっています。

では実際にコードで見てみましょう。

const array = [5,15,17]

const newArray = array.map((number)=>｛
　　return number ＊ 3
｝)

console.log(newArray)

//結果
15
45
51

コードの解説

上記のコードでは

①arrayという変数に配列を代入

②newArrayという別の変数にnumberという引数を渡した関数を代入しています。

③関数の中ではnumberに×3をする事で、arrayの配列内の要素全てに×3をしてreturnしています。

結果は上記の通りです。

このようにmap()は配列に何らかの処理を加えて別の配列を作り出す時に使うメソッドです。

for文を使った場合

const array = [5,15,17];
const newArray = [];

for(let i = 0; i< array.length ; i++){
    newArray[i] = array[i]*3;
};

console.log(newArray)
;
//結果
15
45
51

forEachで書く場合

const array = [5,15,17];
const newArray= [];

array.forEach(function(value){
  newArray[value] = value*3;
});

console.log(newArray);

//結果
15
45
51

このように結果は同じになるのですが、map()の方がよりスマートで、新しく配列を作った事がわかりやすいと思います。

終わりに

いかがでしたでしょうか。

map()は時と場合によってはforやforEachよりも効率的に書くことが出来ます。

JavaScriptの配列を操作する上では知っておいて損はないメソッドなので是非この機会に覚えておきましょう♪

それではまた明日の記事でお会いしましょう。

おしまい✨