mapメソッドとは？
mapメソッドは、JavaScriptで配列の各要素に対して同じ処理を行い、その結果を新しい配列として返すメソッドです。元の配列は変更されず、新しい配列が生成されます。
具体的な事例
1. 配列の各要素に1を足す
const numbers = [1, 2, 3, 4, 5];
const numbersPlusOne = numbers.map(number => number + 1);
console.log(numbersPlusOne); // [2, 3, 4, 5, 6]
mapメソッドを使用することで、元の配列の各要素に1を足し、新しい配列を簡単に作成できます。
2. オブジェクトの配列から特定のプロパティを取り出す
const users = [
{ name: 'Taro', age: 25 },
{ name: 'Jiro', age: 30 },
{ name: 'Saburo', age: 35 }
];
const names = users.map(user => user.name);
console.log(names); // ['Taro', 'Jiro', 'Saburo']
オブジェクトの配列から、特定のプロパティ（ここではname）を抽出し、新しい配列を作成します。
3. 配列の要素を文字列に変換する
const numbers = [1, 2, 3];
const strings = numbers.map(number => number.toString());
console.log(strings); // ['1', '2', '3']
数値の配列を文字列の配列に変換する例です。
4. 複数のオブジェクトのプロパティを計算する
const products = [
{ price: 100, tax: 0.1 },
{ price: 200, tax: 0.15 },
{ price: 300, tax: 0.2 }
];
const finalPrices = products.map(product => product.price * (1 + product.tax));
console.log(finalPrices); // [110, 230, 360]
各商品の価格と税率を使って、最終価格を計算する例です。
mapメソッドのメリット
-
簡潔なコード:
forループなどよりも、少ないコードで繰り返し処理を実装できます。 - 読みやすさ: 処理内容が一目で分かりやすく、コードの可読性が高まります。
- 新しい配列の生成: 元の配列を変更せずに、新しい配列を作成するため、副作用を減らすことができます。
まとめ
mapメソッドは、配列の各要素に対して処理を行う際に非常に便利なメソッドです。for文に比べてコードが簡潔になり、読みやすさも向上します。JavaScriptの配列を扱う際には、ぜひ活用してみてください。