【JavaScript】配列処理を実装できるmapメソッドについて初心者向けにまとめてみた

今回は配列処理を実装できるmapメソッドについて深掘りしてみたので、初心者向けに解説したいと思います。似たようなメソッドが多くあり、どのような違いがあるのか分からなかったためこの機会にまとめてみました。

mapメソッドって何？どのように記述するの？といったJavaScript初学者の参考になればと思います。

この記事の内容

mapメソッドとは
mapメソッドをコードで見る
コールバック関数の引数
似たような機能を持つメソッド
まとめ
参考

mapメソッドとは

mapメソッドとは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成するメソッドです。似たようなメソッドにはforEachがあり、返り値があるのがmapメソッド、返り値がないのがforEachメソッドで分けることができます。

mapメソッドは以下のように定義することができます。

var array = [配列のデータ];
array.map(コールバック関数);

mapメソッドのポイント

mapメソッドは配列のデータに対して使えるメソッド
配列のデータ1つ1つに対しての処理を加えることができる
処理結果を配列で返してくれる（返り値がある）

mapメソッドをコードで見る

mapメソッドを使用した簡単なコードを見てみましょう。

以下は、配列の各データに対して3倍した時の処理を返すプログラムになります。

const array = [3, 4, 7, 16];

const map = array.map(a => a * 3);
console.log(map);
=> [9, 12, 21, 48]

このくらいのプログラムであれば簡単に理解できると思います！

もう1つ例を見てみましょう。

先ほどはアロー関数で定義しましたが、今度はfunctionを使って記述します。これは先ほど記述したプログラムと全く同じになります。

const array = [3, 4, 7, 16];

const map = array.map(function(number){
  return number * 3
});
console.log(map);
=> [9, 12, 21, 48]

コールバック関数の引数

コールバック関数の引数には3つの値を記述することができます。

value：配列の値
index：配列のindex番号
array：現在処理している配列

配列のデータ.map(function(value, index, array) {
});

試しにそれぞれの引数のデータを取り出してみましょう。

const array = [3, 4, 7, 16];
const map = array.map(function(number, index, array){
  return number;
});
console.log(map);
=> [3, 4, 7, 16]

const array = [3, 4, 7, 16];
const map = array.map(function(number, index, array){
  return index;
});
console.log(map);
=> [0, 1, 2, 3]

const array = [3, 4, 7, 16];
const map = array.map(function(number, index, array){
  return array;
});
console.log(map);
=> [[3, 4, 7, 16], [3, 4, 7, 16], [3, 4, 7, 16], [3, 4, 7, 16]]

このように、3つの引数を利用することで様々な条件を付けた実装が可能になりますね。