Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【JavaScript ECMAScript】Array::Array.prototype.forEachインスタンスメソッドの使い方

Array.prototype.forEach()インスタンスメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

Array.prototype.forEach()メソッドは、配列の各要素に対して、指定されたコールバック関数を一度ずつ実行するメソッドです。

このメソッドは、配列の内容を反復処理し、それぞれの要素に対して特定の操作を行いたい場合に利用されます。forEach()メソッドの第一引数には、要素ごとに実行されるコールバック関数を指定します。このコールバック関数は、現在の要素の値、その要素のインデックス、そしてforEach()が呼び出された元の配列本体の3つの引数を順番に受け取ります。第二引数として、コールバック関数内でthisが参照する値を任意で指定することも可能です。

forEach()メソッドの戻り値は常にundefinedです。これは、新しい配列を生成したり、値を返したりする目的ではなく、あくまで各要素に対する「処理」を実行することに特化しているためです。

注意点として、forEach()は、途中でループを中断するためのbreak文やreturn文のような仕組みを提供しません。そのため、配列のすべての要素を処理し終えるまで実行が継続されます。また、非同期処理を行う場合や、配列の要素に基づいて新しい配列を生成したい場合には、他の適切なメソッド(例: map()filter(), for...ofなど)の利用が推奨されます。

公式リファレンス: Array.prototype.forEach()

構文(syntax)

1const array1 = ['a', 'b', 'c'];
2
3array1.forEach((element, index) => {
4  console.log(element, index);
5});

引数(parameters)

callbackFn, thisArg = undefined

  • callbackFn: array の各要素に対して実行される関数。以下の3つの引数を受け取ります。
    • currentValue: 現在処理されている array の要素の値。
    • index: 現在処理されている array の要素のインデックス。
    • array: forEach() を呼び出した array オブジェクト自身。
  • thisArg = undefined: callbackFn を実行する際に、this として使用される値。省略された場合は undefined になります。

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語