Help us understand the problem. What is going on with this article?

forEach vs map in JavaScript

More than 1 year has passed since last update.

ある会社の面接でforEachとmapの違いを聞かれて、十分な回答ができず後悔。。
forEach、map、filterの違いをまとめました。

比較

forEach map filter
動作 配列の全要素に対して関数を一度ずつ実行。 配列の全要素に対して関数を一度ずつ実行。returnを返さない場合、新しい配列のindexが同じ場所にundefinedが入る。 配列の全要素に対して関数を一度ずつ実行。実行結果がtrueの要素を新しい配列に挿入する。
返り値 不要
返す値 undefined 新しい配列  新しい配列 
元々の配列の変更 不可  不可 
新しい配列のサイズ 元々の配列の数 実行テストに通った要素の数
速度 速い 遅い
使用例 配列の全要素に対して同じ関数を実行させたいが、返り値が不要、もしくは元々の配列を変更させたい場合  配列の全要素に対して同じ関数を実行させて新しい配列を作りたい場合 配列の全要素に対して同じ関数を実行させ、実行テストに通った要素で新しい配列を作りたい場合

コードの例

forEach.js
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let newArr = []
arr.forEach((item, index) => {
 if (item % 2 == 0 ) { arr[index] = item * 2 }
})
map.js
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let newArr = arr.map((item) => {
 return item * 2
})

 速度の比較

map VS forEach
Screen Shot 2018-08-01 at 2.12.58 PM.png

mapのほうが速い。
ブラウザによっても結果が少し異なると思うが、forEachのほうが30%程遅いとの結果がでた。

ポイント

forEach()map()は書き換え可能。
map()は新しい配列をメモリに割り当て、新しい配列を返す(元の配列とサイズは同じ)。forEach()は新しい配列を返さず、常にundefinedを返す。
forEach()は元の配列を変更可能。map()は元の配列を変更せず、新しい配列を返す。
forEach()よりもmap()のほうが処理速度が高い。
filter()は実行テストを通った値を新しい配列として返すため、実行テストに通った要素数が配列の要素数となる。map()は元の配列とサイズが同じ。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした