【JavaScript】map()メソッドを使って繰り返し処理をスッキリさせる

map()メソッドとは？

配列のArrayオブジェクトが持つメソッドで、元となる配列から新しく配列を作るためのメソッドです。map()メソッドは与えられた関数を配列の全ての要素に対して呼び出し、その結果からなる新しい配列を生成してくれます。

map()メソッドの使い方

元の配列から新しい配列を生成する

今回は数字を格納した配列を用意し、配列の要素に対して2倍にする処理を実行してみます。

const numArr = [1, 2, 3, 4, 5];
const result = numArr.map((number) => {
  return number * 2;
});
console.log(result);

出力結果

[2, 4, 6, 8, 10]

1〜5までの数値が格納された配列に対して、コールバック関数で各要素を2倍にする処理を実行しています。なので設定した引数のnumberにはnumArrに格納された数字が順番に入っています。返り値として各要素が2倍になった配列を「result」に代入し、各要素を2倍にした新しい配列を生成してくれています。

map()メソッドを使うことで元の配列の全ての要素を呼び出し、その結果からなる新しい配列を生成してくれるので、「for文」や「while文」などを使ってループ処理を使わずにスッキリコードを書くことができます。

各要素をひとつずつ取り出す

map()メソッドを使えば、各要素をひとつずつ取り出すことも可能です。

const numArr = [1, 2, 3, 4, 5];
numArr.map((number) => {
 console.log(result);
});

出力結果

1
2
3
4
5

このように単純に配列をループして何か処理を実装することも可能です。

もし、従来のfor文で同じことをしようと思ったら下記のようになります。

const numArr = [1, 2, 3, 4, 5];

for (let i = 0; i < numArr.length; i++) {
  console.log(i + 1);
}

map()メソッドで書いたコードの方がだいぶスッキリしますね。

このように、map()メソッドを使うことで、元の配列から全ての要素を取り出して新しい配列を作ってくれたり、配列をループさせて何か処理を実装したりすることが可能です。