JS memo

お洒落にJavaScript。

2019年6月12日21:49

JavaScriptのmapとforEachの使い分け

メインビジュアル

JavaScriptのmapとforEachの使い分け

JavaScriptのmapとforEachの違いをコード量や速度から比較してみて、お互いの使いどきをまとめました。

目次

  1. mapとforEachについて
  2. mapとforEachのコードの比較
  3. mapとforEachの速度比較
  4. まとめ

mapとforEachについて

まずmapとforEachを比較する前に二つの定義をみておきましょう。

Array.prototype.map

mapの説明

mapとは配列の要素に関数で指定した何かしらの処理を加えて新たな配列を作ってくれます。

console.log( [1,2,3].map( x => x * 2 )) // [2,4,6]

Array.prototype.forEach

forEachの説明

forEachとはmap同様に配列の要素一つ一つに関数で指定した何らかの処理をしてくれます。
しかし処理をするだけなのでundefinedが返ってきます。

console.log( [1,2,3].forEach( x => x * 2 )) // undefined

mapとforEachのコードの比較

下記の配列arrから要素一つ一つを2倍して新たな配列を作る場合のコードの書き方をmapとforEachで比較してみます。

const arr = [1,2,3];

mapの場合:

const new_arr = arr.map( x => { x * 2 });

forEachの場合:

const new_arr = [];
arr.forEach( x => new_arr.push(x * 2) );

or

arr.forEach( (x, index) => {return arr[index] = x * 2;} );

mapの方がシンプルでコードも何をしているのかわかりやすく、forEachの方がコードは長いですが微々たる差のようにも見えます。

mapとforEachの速度比較

次にmapとforEachの処理速度を比較してみましょう。
1〜1万までの整数を格納した配列を作成し、その配列の要素を2倍した新しい配列を作成する処理をmapとforEachで行い、Date.now()で速さを計測します。

const arr = [];
for(let i=1; i<=100000; i++) arr.push(i);

const startTime = Date.now();
//それぞれの処理
const endTime = Date.now();
console.log(endTime - startTime);

計測はそれぞれ10回行い、その平均をとった結果です。

  • map --- 29.7ms;
  • forEach --- 4ms;

forEachが全然速かったです。
ちなみにforループを使用した場合、約3〜4msだったのでforEachが速いというよりmapが少し遅いといった方が適切かもしれません。

まとめ

mapとforEachの比較をしてみた結果、mapとforEach結局どっちがいいのかはシュチュエーションによるのでまとめておきます。

mapがいい場合

任意の配列から各要素に処理を加えて新たな配列を作成する

コードをシンプルにわかりやすくしたい

forEachがいい場合

配列の値を使って外部の要素を変えたい

実装時間を速くしたい


forEachよりもmapを使うべきだ!という風潮が迫りつつありますが、お互いのメリット・デメリットをしっかり把握しておきましょう!