mapメソッド - 駆け出しのエンジニア日記

mapメソッド・・・

与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成するものになります。

目的としては、「配列を違う形に変換する」ことです。

サンプルを書いてみます。

const numbers = [1, 2, 3, 4, 5];
const doubles = numbers.map(function(num) {
 return num * 2;
});
 
doubles
// [2, 4, 6, 8, 10]

各々の要素がmapメソッドを使うことで2倍になり新しく出力されています。

numbers
//[1, 2, 3, 4, 5]

numberの方は中身は変わっていません。

mapメソッドもforEachメソッドも、配列の反復処理が可能であるため同様の処理ができます。しかし、forEachメソッドはmapメソッドと異なりコールバック関数は戻り値を取りません。

・配列の変換が必要なら「mapメソッド」を使う

・配列の変換が不要なら「forEachメソッド」を使う

という形で覚えましょう。

もう一つサンプルを見てみます。

const movies = [
 {
 title: 'Amadeus',
 score: 99
 },
 {
 title: 'Stand By Me',
 score: 85
 },
 {
 title: 'Parasite',
 score: 95
 },
 {
 title: 'Alien',
 score: 90
 }
];

映画のタイトルだけ出力したいとします。

const titles = movies.map(function(movie) {
 return movie.title;
});

titles
// ['Amadeus', 'Stand By Me', 'Parasite', 'Alien']

上記のように映画のタイトルだけが含まれたStringの配列に変わった事が確認出来ます。

mapメソッドを使用することで配列の中身を別な型に変換したり、オブジェクトの配列から特定の内容を抽出したりすることも可能です。