JavaScriptのmapメソッドについて

はじめに

実務でmapメソッドについて触れる機会があり、foreachメソッド、filterメソッドとの違いについて調べた内容の備忘録です。

結果

・forEachメソッドは処理を実行するのみで、戻り値を持たない。
・mapメソッドは戻り値を返す。
・filterメソッドは処理の条件にあってはまる配列の要素を戻り値で返す。

一つずつ簡単に解説します。

forEachメソッド

配列の繰り返し処理を行う点は他のメソッドと同様ですが、実行するのみで、戻り値がありません。
そのため配列の中に代入していく必要があります。

let number = [1,2,3,4,5]

number.forEach(value => {
  number.push(value * 2);
});
// number = [2,4,6,8,10]

returnで値を受け取ろうとするとundefinedになります。

let number = [1,2,3,4,5]

let result = number.forEach(value => {
  return value * 2;
});
// undefined

繰り返し処理で戻り値を受け取りたい場合はmapメソッドを使用します。

mapメソッド

mapメソッドの記述方法はforEachと同じです。

let number = [1,2,3,4,5]

let result = number.map(value => {
  return value * 2;
});
// result = [2,4,6,8,10]

mapメソッドを使用すると戻り値として値を受け取ることができます。

filterメソッド

filterメソッドは条件に当てはまる要素のみを配列にして戻り値に返します。

let number = [1,2,3,4,5]

let result = number.map(value => {
  return value / 3;
});
// result = [3]

filterメソッドを使用すると3で割り切れる要素のみを返します。

まとめ

forEachメソッドはあまりコードを書く際には適切でないことが多い。
条件で絞り出す際はfilterメソッドやその他の関数を用いた方がシンプルでわかりやすくなる。

補足

mapメソッドを使用した際にUncaught TypeError: hoge.map is not a functionと表示される際は、型が配列ではなく、オブジェクトになっている場合が多い。その場合はオブジェクトを配列に直す必要がある。