【JavaScript】map()メソッドの使い方について

本記事の目次

map()メソッドの基本的な書き方
map()メソッドをアロー関数で記述する
map()メソッドの引数
map()メソッドの返り値
まとめ

map()メソッドの基本的な書き方

まずは、for文を使って、配列に対してループ処理を行ってみましょう。

// 配列arrayを用意する
const array = [1, 2, 3, 4];

// 配列arrayの各要素をコンソールに出力するループ処理
for(let i = 0; i < array.length; i ++) {
  console.log('elem: ' + array[i]);
}

// コンソールには以下が出力される
// elem: 1
// elem: 2
// elem: 3
// elem: 4

では、map()メソッドを使って、同様のループ処理を行ってみましょう。

map()メソッドでは、引数にコールバック関数を指定します。

コールバック関数の引数には配列の要素が渡され、コールバック関数の中身が具体的な処理になります。

// 配列arrayを用意する
const array = [1, 2, 3, 4];

// 配列arrayの各要素をコンソールに出力するループ処理
array.map(function(elem) {
  console.log('elem: ' + elem);
});

// コンソールには以下が出力される
// elem: 1
// elem: 2
// elem: 3
// elem: 4

配列に対してループ処理を行うほとんどの場合、for文で記述するよりもmap()メソッドを使う方が簡潔に記述することができます。

map()メソッドをアロー関数で記述する

map()メソッドの引数に指定するコールバック関数は、アロー関数で記述することができます。

// 配列arrayを用意する
const array = [1, 2, 3, 4];

// ループ処理をアロー関数で記述する
array.map((elem) => {
  console.log('elem: ' + elem);
});

// コンソールには以下が出力される
// elem: 1
// elem: 2
// elem: 3
// elem: 4

アロー関数を使った方が、簡潔に記述することができてコードが見やすくなるため、map()メソッドを使う際には積極的にアロー関数を使って良いでしょう。

map()メソッドの引数

map()メソッド第一引数には配列の要素が渡されましたが、第二引数と第三引数にもそれぞれ渡される値があります。

引数	渡される値
第一引数	配列の要素
第二引数	index番号
第三引数	配列自体

コンソールに出力して確認してみましょう。

// 配列arrayを用意する
const array = [1, 2, 3];

// 第一、第二、第三引数を、コンソールに出力するループ処理
array.map((elem, index, array2) => {
  console.log('elem: ' + elem);
  console.log('index: ' + index);
  console.log('array2: ' + array2);
});

// コンソールには以下が出力される
// elem: 1
// index: 0
// array2: [1, 2, 3]
// elem: 2
// index: 1
// array2: [1, 2, 3]
// elem: 3
// index: 2
// array2: [1, 2, 3]

map()メソッドの返り値

map()メソッドでは、コールバック関数内で何かしらの処理を行った後の値をreturnすることで、returnした値を要素にもつ新しい配列を返すようになります。

// 配列arrayを用意する
const array = [1, 2, 3];

// 配列arrayの各要素を2倍にした要素を持つ配列をmapメソッドで返し、newArrayに代入する
const newArray = array.map((elem) => {
  return elem * 2;
});

console.log(newArray); // [2, 4, 6]

ちなみに、コールバック関数内でreturnしないで新しい配列に代入すると、全ての要素がundefinedな配列になります。

// 配列arrayを用意する
const array = [1, 2, 3];

// コールバック関数内でreturnしないで新しい配列に代入する
const newArray = array.map((elem) => {
  elem = elem * 2;
});

console.log(newArray); // [undefined, undefined, undefined]