JavaScript

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

JavaScript

 

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

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

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つの値を記述することができます。

配列のデータ.map(function(value, index, array) {
});
  • value:配列の値
  • index:配列の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つの引数を利用することで様々な条件を付けた実装が可能になりますね。

似たような機能を持つメソッド

前述したforEachメソッドの他にも、mapメソッドと似たような機能を持つメソッドが存在します。

ここは詳しくは解説しませんので、ぜひご自身で調べてみてください。

  • filter()メソッド
  • includes()メソッド
  • some()メソッド
  • reduce()メソッド

まとめ

  • mapメソッドとは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成するメソッドである。
  • mapメソッドは返り値を持つ。
  • コールバック関数の引数には3つの値を持つことができる。

参考

開発者向けのウェブ技術 Map:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map

開発者向けのウェブ技術 Array.prototype.map():
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説!:
https://www.sejuku.net/blog/21812

 

 

今回は配列処理を実装できるmapメソッドについて解説しました。1つのメソッドでも多くの機能を持っているため、時々深ぼってみるのもいいですね!