原文: JavaScript Map – How to Use the JS .map() Function (Array Method)

配列の要素に何かしらの処理を適用して、要素を変更した新しい配列を取得したい場合があります。

ループを使って繰り返し処理をわざわざ書く代わりに、標準で用意されている Array.map() メソッドを使うことができます。

Array.map() メソッドを使用すると、コールバック関数を使用して配列に反復処理を行い、その要素を変更できます。コールバック関数は、配列の各要素に対して実行されます。

例えば、以下のような要素を持った配列があります。

let arr = [3, 4, 5, 6];
シンプルな JavaScript の配列

そして、配列の各要素に対して、3 を掛ける必要があるとします。for を使用して、以下のようなループ処理を行うことを考えるかもしれません。

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]
for ループを使用して、配列の反復処理を行う

しかし、実は Array.map() メソッドを使用して、同じ結果を取得できます。以下に例を記載します。

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]
map() メソッドを使用して、配列の反復処理を行う

Array.map() メソッドは、要素に対して変更を適用するためによく使用されます。上記コードのように、特定の数字を掛けることもできますし、自身のアプリに応じて必要な処理を行うこともできます。

オブジェクトの配列に対して map() メソッドを使用する方法

例えば、以下のように友達の firstName と lastName を値に持つオブジェクトの配列があるとします。

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];
オブジェクトの配列

以下のように、map() メソッドを使用して、配列をループし、firstName と  lastName の値を結合できます。

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]
map() メソッドを使用して、オブジェクトの配列の反復処理を行う

map() メソッドでは、要素以外の値も使用できます。map() メソッドによってコールバック関数に渡される全ての引数を確認していきましょう。

map() メソッドの引数を省略しない構文

map() メソッドの構文は以下のようになります。

arr.map(function(element, index, array){  }, this);

コールバック関数である function() が配列の各要素に呼ばれます。map() メソッドは引数に、現在処理している要素の値である element、添字である index、また処理を実行している配列自体である array を渡します。

引数 this はコールバック関数の中で使用されます。デフォルトでは、その値は  undefined となっています。

例えば、this の値を数値 80 に変更する方法を以下に記載します。

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);
map() メソッドの引数 this に、数値を代入する

console.log() を使用して、他の引数の確認もできます。

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);
値を確認するために、引数をログを出力する

以上が Array.map() メソッドに関する必要な情報です。大抵、コールバック関数で使用される引数は element だけで、残りの引数は省略されることが多くあります。私が普段取り組んでいるプロジェクトでもそうなっています。

このチュートリアルをお読みくださりありがとうございます。

私が書いた他の JavaScript チュートリアル how to sum an array of objects (配列のオブジェクトの値を足す方法) や methods to find a palindrome string (回文の文字列を探すためのメソッド) も役に立つかもしれません。これらは、JavaScript でたびたび質問される問題に関する記事です。

また、Web 開発のチュートリアル (主に JavaScript 関連) について無料ニュースレターを配信しています。