JavaScriptにおけるforEach()の利用方法

forEach とは？#

forEach() は Array (配列) オブジェクトで利用可能な関数であり、 Array 内のすべての要素に対して何かしらの処理を実施したい時に利用するものです。各要素は昇順(配列の前の要素から順番)で呼び出されます。

通常の for ループを関数呼び出しの形にしたもの、とイメージしておけば問題ありません。

forループを関数型プログラミング的に記述ができる、という言い方もできます。

forEach の具体例と for 文との比較#

forEach の簡単な例を示します。以下の例は配列内のすべての要素をコンソール出力するものです。

/* forEach を利用した場合 */
const testArray1 = [1, 2, 3, 4];
testArray1.forEach((elem) => {
    console.log(elem);
})


/* for で書いた場合 */
for (var i = 0; i < testArray1.length; i++) {
    console.log(testArray1[i]);
}

上記では アロー関数式 と呼ばれる機能を利用しています。アロー関数式は通常の関数を簡略的に表記したもの[1] で、関数を別枠で定義した場合には以下のようになります。このコードは上記のものと同じ動作をします。

const PrintElement = function (elem) {
    console.log(elem);
}
const testArray2 = [1, 2, 3, 4];
testArray2.forEach(PrintElement)

または、通常の関数記述形式を forEach() の中にそのまま入れることも可能です。

const testArray3 = [1, 2, 3, 4];
testArray3.forEach(function (elem) {
    console.log(elem);
})

次の例では文字列データから構成される配列内のすべてに対して文字列の置き換え (スラッシュをハイフンへ) を実施しています。

/* forEach を利用した場合 */
const testArray4 = ['2022/01/01', '2022/02/01', '2022/03/01'];
const replacedArray = []
testArray4.forEach((elem) => {
    replacedArray.push(elem.replaceAll('/', '-'));
});
console.log(replacedArray);
// => ['2022-01-01', '2022-02-01', '2022-03-01']


/* for で書いた場合 */
const replacedArrayFor = []
for (var i = 0; i < testArray4.length; i++) {
    replacedArrayFor.push(testArra4[i].replaceAll('/', '-'));
}
console.log(replacedArrayFor);
// => ['2022-01-01', '2022-02-01', '2022-03-01']

forEach 利用方法#

forEach の書式は以下の通りです。

forEach(callbackFn, thisArg)

ここで指定される calbackFn については以下の通りです。

callbackFn(element, index, array)

const exampleArray = [1, 2, 3, 4, 5]
exampleArray.forEach((element, index, array) => {
    if (index == 0) {
        console.log(`array : ${array}`);
        console.log(`this : ${this}`);
    }
    console.log(`element #${index} -> ${element}`);
})

array : 1,2,3,4,5
this : [object global]
element #0 -> 1
element #1 -> 2
element #2 -> 3
element #3 -> 4
element #4 -> 5