JavaScriptのforEach: 配列を順に参照していく簡略された記法

12, 2020-08-11

目次

JavaScriptのforEachの使い方

JavaScriptの配列には配列をループで回したい時に使えるメソッドforEachがあります。

forEachの基本

配列のメソッドforEachを呼び出すとき、その引数に関数を渡すと関数の引数に配列の要素が渡されます。
forEachは配列の先頭から順に要素を参照し、そのたびに関数を呼び出し引数に要素を渡します。

const arr = [1, 2, 3]

arr.forEach(el => {
    console.log(el)
})

↑のコードの実行結果は↓のようになります。

1
2
3

↑の例ではアロー関数を渡していますが↓のように普通の関数も使えます。

arr.forEach(function (el) {
    console.log(el)
})

普通のfor文と何が違うの?

単純に配列を順に参照したい場合は、forEachのほうが短く書けるのがメリットです。
普通のfor文と比べてみましょう。

const arr = [1, 2, 3]

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

arr.forEach(el => {
    console.log(el)
})

forEachのほうがスッキリしてますね。

添え字の参照

forEach内で現在走査中の配列の添え字を参照したい場合は、関数の2番目の引数を参照します。

const arr = [1, 2, 3]

//                ↓これ
arr.forEach((el, index) => {
    console.log(index)
})

↑のコードの実行結果は↓のようになります。

0
1
2

配列自体の参照

forEach内で走査中の配列自体を参照したい場合は、関数の3番目の引数を参照します。

const arr = [1, 2, 3]

//                        ↓これ
arr.forEach((el, index, array) => {
    console.log(array[index])
})

↑のコードの実行結果は↓のようになります。

1
2
3

抜けてる要素には何もしない

たとえば

[1, 2, , 4]

のような途中が欠落(未初期化)してる配列をforEachで走査した場合、forEachは欠落した(未初期化の)要素を参照しません。

const arr = [1, 2, , 4]

arr.forEach(el => {
    console.log(el)
})

↑のコードの実行結果は↓のようになります。

1
2
4

thisの参照先を変える

たとえばforEachに普通の関数を渡している時に、thisの参照先を変えたい場合があります。
旧来のように関数を使って疑似的なクラスを作るときを考えてみます。
配列の合計を計算するクラスを作ってみましょう。

function SumCounter () {
    this.sum = 0
}

SumCounter.prototype.calc = function (arr) {
    arr.forEach(function (el) {
        this.sum += el
    }, this)
    //   ↑ ここに注目
}

const sumCounter = new SumCounter()
sumCounter.calc([1, 2, 3])
console.log(sumCounter.sum)  // 6

forEach内でthis.sumにアクセスしています。
このthisの参照先を明示的に変更したい場合は、↑のようにforEachの2番目の引数に参照先を渡します。

↑のコードで2番目の引数を省略した場合、出力される値は「0」になります。

問題

Q1: forEachの第1引数に渡せるものは何か答えよ。

  1. 配列

  2. 関数

  3. 整数

Q2: forEachのコールバック関数の第2引数の役割を答えよ

  1. 要素の参照

  2. 配列の参照

  3. 添え字の参照

Q3: forEachのメリットとして正しいものを答えよ

  1. 普通のfor文と比べて詳細に書ける

  2. 普通のfor文と比べて単純に書ける場合がある

  3. 普通のfor文と比べて添え字が参照しやすい


正解

Q1: 2
Q2: 3
Q3: 2