JavaScript forEachメソッド

forEachメソッドの使い方をメモ。

forループの場合

まず、forループを使って書いたコード。

var numbers= [1, 2, 3, 4, 5];
var sum = 0;

for(var i = 0; i < numbers.length; i++) {
    sum = sum + numbers[i];
}

for文の場合、for(ループ条件)の１文が長くなり、他の人がコードを読んで理解するのに少し時間がかかりそう。配列の要素へのアクセスにインデックスを使うことも読みにくさを増しているように見える。可読性の問題。

forEachの場合

それをforEachで書き換える。

var numbers= [1, 2, 3, 4, 5];
var sum = 0;

numbers.forEach(function(value) {
    sum = sum + value;
});

配列の要素１つ１つを使って、コールバック関数「function(value)」を呼び出して処理を実行する。※valueには配列の要素１つ１つが入る。
ほんの少しシンプルに見える。

事前に定義した関数（名前付き関数）を、コールバック関数の部分に置き換えることも可能。

var numbers= [1, 2, 3, 4, 5];
var sum = 0;

// 事前に定義した関数
function addNumber(value) {
    sum = sum + value;
}

numbers.forEach(addNumber);

// ↑↑ addNumber関数にカッコ()は付けない！
// カッコ()を付けると関数を呼び出す意味になり、おかしな動きになる。

コード部分にも書いているが、文字が見えにくいのでここでも書いておく。
・ forEach内に書いているaddNumber関数に、カッコ()は付けないように
　注意する。
　カッコ()を付けると関数を呼び出す意味になり、おかしな動きをする。

まとめ

・forEachは、forループよりも書き方がシンプル。
・forEachは、forループよりも可読性が増す。
・事前定義した名前付き関数を、forEachのコールバック関数部分に
　置き換えることができる。その場合、関数名のみを書き、カッコ()は
　付けない。