JavaScriptのforEachが良く分からないという質問に対する回答

for( var i=0; i<array.length; i++){console.log(array[i];}は理解しているけど、
array.forEach(element => {console.log(element);});はよくわからないという方向けの説明です。

forEach の書き方は検索すれば大量にヒットするのですが、それでもこの書式の意味が良く分からないという方は一定数いるのではないでしょうか。ヤフー知恵袋でまさにその質問があったので回答してみたのでその紹介です。

質問内容としては以下です。

forEachメソッドについて
const numbers=[1,2,3];
numbers.forEach((number) =>{console.log(number);});
ここの引数の使い方がいまいち理解できません。
numberが定義されていないのになぜこれでちゃんと出力されるのですか？

私が初めてこの書き方を見たときと同じ疑問です。

forEachの構文や正確な情報は MDN Web DocsのArray.prototype.forEach()の説明 などを見ていただければよいかと思います。

今回は for を forEach に書き換えていくことで構文を覚えるのではなく、理解するということを目指していく。

①forを用いた記述

これが分からない人は、ごめんなさいこれ以上読み進めても意味がないです。

function test()
{
  var array=[1,2,3,4,5];
  for( var i=0; i < array.length; i++ )
  {
    console.log( array[i] );
  }
}

②forの処理を関数化

function hogehoge( number )
{
  console.log( number );
}

function test()
{
  var array=[1,2,3,4,5];
  for( var i=0; i < array.length; i++ )
  {
    hogehoge( array[i] );
  }
}

③コールバック関数風に書き換え

あまり利点はないですが説明のための変形です。

function hogehoge( number )
{
  console.log( number );
}

function test()
{
  var array=[1,2,3,4,5];
  var callbackFunction = hogehoge;
  for( var i=0; i < array.length; i++ )
  {
    callbackFunction( array[i] );
  }
}

④for文自体を関数化

forEach風の関数を作成します。

function hogehoge( number )
{
  console.log( number );
}

function forEachFunction( array, callbackFunction )
{
  for( var i=0; i<array.length; i++)
  {
    callbackFunction( array[i] );
  }
}

function test()
{
  var numbers=[1,2,3,4,5];
  forEachFunction( numbers, hogehoge );
}

⑤forEachに書き換える

forEach風の関数をforEachに書き換えます。

function hogehoge( number )
{
  console.log( number );
}

function test()
{
  var numbers=[1,2,3,4,5];
  numbers.forEach( hogehoge );
}

⑥forEachの中で関数を定義する

forEachのたびに別関数を作ると読みにくくなるので、関数定義しつつコールバック関数登録します。

function test()
{
  var numbers=[1,2,3,4,5];
  numbers.forEach(
    function hogehoge(number){console.log(number);}
  );
}

⑦アロー関数で定義する

関数定義をアロー関数に書き換えます。

function test()
{
  var numbers=[1,2,3,4,5];
  numbers.forEach(
    number=>{console.log(number);}
  );
}

●アロー関数は以下を見てください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions