Javascriptにおける、forとforEachの比較 - やんまーのはてなブログ

知人に質問された内容への回答を兼ねて、Javascriptにおける繰り返し文の記法を振り返る。

この記事では、同じ結果を出力する繰り返し文を、次の２つの文法で記述し比較する。 - for文 - forEach()メソッド

他の記法には言及しない。

配列の要素を出力する

for文と同様に、forEach()メソッドも繰り返し処理をすることができる。

しかし記述方法は異なり、forEach()は配列のメソッドである。引数にはコールバック関数(今回はitemを引数とするアロー関数)を渡す。

渡されたコールバック関数を配列の各要素に対し実行することで、繰り返し処理が実現できる。

// for文で要素を羅列
const items = [ "hello", 32, true ];

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

// forEach()メソッドで要素を羅列
const items = [ "hello", 32, true ];

items.forEach( item => {
  console.log(item);
});

上記２つの実行結果は一致し、以下を出力する。

hello
32
true

forEach()メソッドにわたすコールバック関数で、配列の要素だけでなく添字も受け取る方法を示す。

const items = [ "hello", 32, true ];

for( let i=0; i<items.length; i++ ){
  console.log(`${i} : ${items[i]}`);
}

const items = [ "hello", 32, true ];

items.forEach( (item, index) => {
  console.log(`${index} : ${item}`);
})

上記２つの実行結果は一致し、以下を出力する。

0 : hello
1 : 32
2 : true

上記のように、forEach()メソッドに渡すコールバック関数の、第一引数は配列の要素、第二引数は配列の添字を受け取るようになっている。

補足: console.log内で定義している文字列はテンプレートリテラルを利用し、変数の値を埋め込んだ文字列をつくっている。

for文もforEach()メソッドも繰り返し処理を表記できるが、forEach()メソッドのほうが簡潔に表記できるので、ES6が認められる環境であれば、forEach()メソッドを使うのが好ましい。

ちなみに、forEach()メソッドだけでなく、filter()メソッドやfind()メソッド、map()メソッド等が使える場合は、こちらのほうが更に簡潔に書けるため好ましい。

その他、for...in文やfor...of文もあるが、ここでは言及しない。