まとめ

`map`メソッドとは

map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。オブジェクト指向プログラミングにおいて、プログラム上の手続きの対象を抽象化する概念である。
※mdn web docs

つまり、配列の各要素に対して指定した関数を実行し、その結果を新しい配列として返すメソッドです。このメソッドは、元の配列を変更せず、新しい配列を返します。

目次

基本構文
for文とmapメソッドの比較
活用例

基本構文

配列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"]

参考リンク