プログラミング入門(JavaScript) for文よりforEachを使ってみよう

2020年7月22日

今回はJavaScriptのループ処理のお話を書きます。

なぜforEeachを使うのか

まず、for文のコードです。

const users = ['tami bouz', 'hito-chan', 'Mr.Tochi', 'Buru san']

const result = []
for(let i = 0; i < users.length; i++){
  const firstWord = users[i].split(' ')[0]
  result.push(`Hello ${firstWord}`)
}

続いて forEach です。

const users = ['tami bouz', 'hito-chan', 'Mr.Tochi', 'Buru san']

const result = []
users.forEach(user => {
　const firstWord = user.split(' ')[0]
　result.push(`Hello ${firstWord}`)
})

どちらも同じ結果になりますが、コードで大きな違いがあります。

普通のfor文では、ループするためのカウンター(変数i)が必要ですが、forEachでは必要ありません。

ループ処理というのはほとんど同じような書き方なのに、、毎回書くのはおかしいと思いませんか？

小さな差ですが、ループカウンターを間違えてバグが発生する可能性もあると思います。

forEachの方はループカウンターが記述されていないため、ループ処理で何をやっているのかに注目することができます。

コードを読む時に知りたいことは、ループをどのように回しているのか？ではなく、ループの中でどのようなことをしているのかです。

forEachは、コードの目的がより分かりやすくなるので、ぜひマスターしましょう。