ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

jsのmap と forEachをどう使い分けるといいのか:実行速度、使いドコロ

拡張機能を作ったり、フロントエンドをreactで作ったり、なんか必要だからと、その場しのぎに使ってきた、javascript。

特にわかっていなかったのが、map/forEachの使い分けと、Promiseの使い所などだった。

初歩的で恥ずかしいけど、どうせ忘れるので書いておこうと思う。

map と forEachのちがい

mapは「新しい配列を作り出すためのもの」。

mapを使うと、関数が実施されたことによって作られた、あたらしい配列が返却される。

つまり、

arr = [1,2,3]

let a = arr.map( num => {
  return num * 10;
})
// mapが新しい配列を返却する。
console.log(a) // [10,20,30]

いっぽうで、forEachは、なんも返さない。中身の関数を実行するだけ。

let b = arr.forEach((num) => {
    return num * 10
})
// なにも入っていない。悲しい!
console.log(b) // undefined

こんなふうに関数リテラル化して比較すると、すごく違いがわかりやすい。

上記より、map()は、値を返すので、チェーンメソッドにできることがわかる。

つまり、 myArray.map().join()... とかが、できる。

速度のちがい

参考記事によると、forEach()の方がmap()より70%遅い。

どう使い分けるか

forEach()は単純にある配列に対して、その配列を改造したいとかではなく、単に参考値として利用して、処理を実行したいときにつかう。データベースに保存するとか。

map()は配列じたいを変更したり改造したいときに使う。全部大文字にするとか、禁止文字を除くとか。

参考記事

JavaScript — Map vs. ForEach – codeburst