本記事では、JavaScriptのmapメソッドの使い方について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
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倍された数値が代入されていることが確認できます。
