【forEachとの違いは？】JavaScriptのmapの使い方を解説

Reactを勉強し始めた時にmap関数を初めて知った人も多いと思います。

自分もそうだったんですが、文法の意味が分かっていないので突然登場されてもイマイチ使い方が分かりません。

「mapって繰り返し処理ってことくらいは分かる」
「JavaScriptでforEachもあるけど、mapとは違うの？」
「自分でmapを使ってみるとなぜかコンソールにエラーがでる」

本日はそんな方に向けてmap関数の使い方、forEachとの違いを説明していきます。

また動画もあるので必要に応じて使ってください。

JavaScriptのmapは「配列の繰り返し」を行うもの

まず自分も最初分かってなかったんですが、mapは「配列」の繰り返しをしてくれる関数です。

適当に覚えていた自分は「オブジェクト」に対してもmapを使おうとしてエラーが出て丸1日ハマっていたこともあります。

mapは配列に使用できて、オブジェクトには使用できないことを何よりも最初に覚えましょう。

ちなみに使い方はこんな感じです。

const number = [1,2,3];

number.map((num) => {
   num++;
   console.log(num);
})　// 2,3,4と出力される

配列の中の数字をそれぞれ1ずつ加算したものをコンソールに出力してみました。

numberに1、2、3が入っていて、それぞれ順番にnumに入れて処理をしていく感じです。

ちなみにnumの部分について名前は自由ですが、「配列のなかの1個」という意味が何となく伝わるような単語にすることをおススメします。

さて繰り返し処理の代表的なものにforEachもあります。

先ほどの処理をforEachでも書き直すこともできて、forEachだと以下のような形になります。

const number = [1,2,3];

number.forEach((num) => {
   num++;
   console.log(num)
})　// 2,3,4と出力される

同じように加算された数字が表示されましたね。

mapとforEachの大きな違いは「配列を返すか？」になります。

先ほどの処理をもう一度mapで以下のように書いてみます。

const number = [1,2,3];
  
const numberMap = number.map((num) => {
  num++;
  console.log(num);
  return num;
});
console.log(numberMap);

console.logの後にreturnでも配列の中身を出力するように追記しています。

またnumberMapという定数に関数の処理結果を格納して、numberMapもconsole.logで出力してみることにしました。

そうすることでconsole.logの分とは別で「配列になった数字」も出力されています。

最後の配列の部分が定数numberMapのものになります。

numberMapには[ 2, 3, 4 ]という形で配列が返されていることが分かりました。

さらにもう一度forEachの方でも同じようにしてみます。

const number = [1,2,3];

const numberForEach =number.forEach((num) => {
  num++;
  console.log(num);
  return num;
})
console.log(numberForEach);

forEachを使った場合でも同じようにreturnを追記して、定数numberForEachに格納するように変更しています。

すると繰り返し処理内でのconsole.logは出力されていますが、定数numberForEach（return numの部分）についてはundefinedとなってしまっています。

このようにmapでは繰り返し処理の結果を「配列で返してくれる」ことが大きな特徴になります。

繰り返すだけであればmapでもforEachでもどちらでも問題ないですが、何か別の場所で結果を使いたい場合はmapを使う方が良さそうですね。