本記事では、JavaScriptのmapメソッドの使い方について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
mapメソッド
mapメソッドは、配列を加工して新たな配列を生成することが出来ます。基本的な使い方は以下のとおりです。
let result = Array.map(callbackfn(value, index, array));
- result:新しい配列が代入される
- Array:対象の配列
- callbackfn:コールバック関数
- value(第一引数):配列要素
- index(第二引数):インデックス番号(添え字)
- array:対象の配列
forEachメソッドとmapメソッドは、使い方が似ているのに加えコールバック関数に渡される引数も同じなため、違いが分からないという方も中にはいらっしゃると思います。
forEachメソッドとmapメソッドの明確な違いは、新しい配列を生成するかしないかの違いです。forEachメソッドは配列のループに特化したメソッドですが、mapメソッドは配列に何かしらの処理を加え新たな配列を生成させることに特化したメソッドです。
コールバック関数の引数を確認する
コールバック関数に渡される引数の中身を実際に見てみましょう!
let numArr = [1, 2, 3, 4, 5];
let mul2Arr = numArr.map(function (value, index, array) {
console.log(`value:${value}\nindex:${index}\narray:${array}`);
});
/* コンソールログ *
* value:1
* index:0
* array:1,2,3,4,5
*
* value:2
* index:1
* array:1,2,3,4,5
*
* value:3
* index:2
* array:1,2,3,4,5
*
* value:4
* index:3
* array:1,2,3,4,5
*
* value:5
* index:4
* array:1,2,3,4,5
*/
コンソールログの結果を確認すると、valueには配列要素が、indexにはインデックス番号が、arrayに対象の配列が代入されていることが確認できます。
サンプルコード
mapメソッドを使用したサンプルコードを用意したので、動作確認してみましょう!
let numArr = [1, 2, 3, 4, 5];
// アロー関数 ver
let mul2Arr = numArr.map((value) => value * 2);
// function ver
let mul2Arr = numArr.map(function (value) {
return value * 2;
});
console.log(mul2Arr); // => [2, 4, 6, 8, 10]
サンプルコードでは、元の配列に代入されている値を×2倍した値を新しい配列として生成しています。新しく生成された配列を確認すると「[2, 4, 6, 8, 10]」と2倍された数値が代入されていることが確認できます。