コンパイラかく語りき

import { Fun } from 'programming'

【JavaScript】forEach と for文 における配列イテレーション差異

forEach と for文 における配列イテレーション差異

解説

JavaScript において、 forEach と for 文の違いはいくつかあると思うのですが、今回は配列イテレーションの差異について書きます。

new Array(n) のような形で配列を作成すると、empty item が初期値として設定されます。

// 要素数10の配列を新規作成
const ary = new Array(10)

// 0番目と3番目の要素に文字列を設定
ary[0] = "foo"
ary[3] = "bar"
> console.log(ary)
[ 'foo', <2 empty items>, 'bar', <6 empty items> ]

この状態の配列をイテレーションすると、for文とforEachにおいて挙動に差異が生まれます。

for文が empty item まで含めてイテレーションするのに対して、

// 10回標準出力される
for (let i = 0; i < ary.length; i++) {
  console.log(ary[i])
}
// foo
// undefined
// undefined
// bar
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined
// undefined

forEach では empty item を除いた要素がイテレーションされます。

// 2回照準出力される
ary.forEach((item) => {
  console.log(item)
})
// foo
// bar

URLs