まとめ
mapメソッドとは
map()は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。オブジェクト指向プログラミングにおいて、プログラム上の手続きの対象を抽象化する概念である。
※mdn web docs
つまり、配列の各要素に対して指定した関数を実行し、その結果を新しい配列として返すメソッドです。このメソッドは、元の配列を変更せず、新しい配列を返します。
目次
基本構文
配列numbersの値をnumとしてコールバック関数num => num * 2に渡し、新たな配列doubled numbersとして返している。
JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
//出力結果 [2, 4, 6, 8, 10]
for文とmapメソッドの比較
for文
JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = [];
for (let i = 0; i < numbers.length; i++) {
doubledNumbers.push(numbers[i] * 2);
}
console.log(doubledNumbers);
//出力結果 [2, 4, 6, 8, 10]
mapメソッド
JavaScript
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers);
//出力結果 [2, 4, 6, 8, 10]
比較結果
コードの簡潔さ
for文：ループの初期化、条件チェック、インクリメントの構文が必要で、やや冗長です。
mapメソッド：ループの内部ロジックを隠すため、コードがより簡潔で読みやすくなります。
不変性
for文：元の配列を変更しないように注意する必要があります。
mapメソッド：新しい配列を返し、元の配列を変更しません。
関数型プログラミングのスタイル
for文：命令型プログラミングのスタイルに近く、手続き的です。
mapメソッド：関数型プログラミングのスタイルに沿っており、より宣言的です。
活用例
mapの第一引数outputは配列membersで定義した中身です。
また、第二引数はindexは配列members各要素のインデックス番号です。
各配列にアクセスして、処理（加工）をして、新たな配列を作成していることがわかります。
JavaScript
const members = ["Aileen", "Bob", "Cindy", "David", "Ema"];
const team_members = members.map((output, index) => {
return `${index + 1}番目は${output}`;
});
console.log(team_members);
//出力結果 ["1番目はAileen", "2番目はBob", "3番目はCindy", "4番目はDavid", "5番目はEma"]