【JavaScript】forEach文で配列のループ(繰り返し)処理を行う方法

プログラミングにおいて必須スキルと言っても過言ではないループ処理。その中でも「forEach文」は、シンプルなコードによりJavaScriptでのプログラミングを大きく効率化できるものです。

ここでは、そのforEach文について、基礎的な使い方から上級者向けのコードまで解説していきます。

【関連記事】「未経験だけどIT業界に転職する方法! 職種や仕事内容もご紹介」 【求人特集】「システムエンジニアの転職」

1.forEach文とは

forEach文とは、JavaScriptにおいて配列に特化したループ処理です。コールバック関数に実行したい内容を記述することで、配列の要素ひとつひとつに対して繰り返し処理を実行します。

2.forEach文でできること

forEach文では、配列の各要素に対する繰り返し処理を一括で指示することができます。

通常のfor文の場合、配列内のデータを順に出力するにはループの終了条件やカウンターなどの設定が必要となり、少し複雑なコードになりがちです。

しかしforEach文であれば、コールバック関数に実行したい処理内容を記述するだけで済むので、コードをシンプルにまとめることができ、ミスの軽減や管理がしやすくなるといったメリットがあります。

3.forEach文の基本と使い方

forEach文の基本形は次のようなコードになります。

var array = [配列データ]; array.forEach(コールバック関数);

この形をベースに、一次元配列と多次元配列における使い方について見てみましょう。

まずはforEach文の基本的な使い方として、一次元配列の場合で解説します。具体例として、次のコードを見てみましょう。

var array1 = [‘東京’, ‘神奈川’, ‘千葉’, ‘埼玉’]; array1.forEach(function(value) { console.log(value); });

このコードでは、array1に格納された各要素に対して、forEach文にて順に出力するような命令になっています。そのため、実行するとarrayに格納されている『東京』『神奈川』『千葉』『埼玉』が順に出力されます。

次に、多次元配列の場合ではどのように処理されるか解説します。具体例として、次のコードを見てみましょう。

var array2 = [ [‘東京’, ‘神奈川’, ‘千葉’, ‘埼玉’], [‘茨城’, ‘栃木’, ‘群馬’] ]; array2.forEach(function(value) { console.log(value); });

このコードでは、array2に格納された要素に対してforEach文で出力するような命令になっています。そして、この「array2に格納する」ことが注意ポイント。このコードでarray2に格納されている要素は2つの配列です。

したがって、実行結果は『‘東京’, ‘神奈川’, ‘千葉’, ‘埼玉’』『’茨城’, ‘栃木’, ‘群馬’』となります。

4.forEach以外のループ処理メソッド

mapは、既存の配列の要素に対して指定した処理を実行し、新しい配列として生成します。動作としてはforEach文に似ていますが、配列を新たに生成するという点が異なります。

■4.1.1.書き方

具体例として、次のコードを見てみましょう。

var array3 = [1, 2, 3, 4, 5]; var n3 = array3.map(function(value) { return value * 2; }); console.log(n3);

このコードでは、コールバック関数内にてarray3の要素を2倍にし、新たにn3という配列に格納しています。したがって実行結果は『2, 4 , 6, 8, 10』となります。

filterは、指定した条件に合致する要素を抽出し、新たな配列を生成します。mapと少し似ていますが、mapではすべての値に対してコールバック関数内の処理を実行し新たな配列を生成するのに対して、filterでは該当する要素のみを抽出しています。

■4.2.1.書き方

具体例として、次のコードを見てみましょう。

var array4 = [3, 7, 2, 1, 6, 9, 4]; var n4 = array4.filter(function(value) { return value < 5; }); console.log(array4);

array4に格納された要素のうち、filterによって5未満の数値をn4に抽出しています。したがって実行結果は『3, 2, 1, 4』となります。

5.中断させたい場合の注意点

JavaScriptではループ処理を中断させる際にbreakをよく利用されますが、forEach文ではbreakを使用することができません。万が一breakが書かれた状態で実行するとエラーになってしまいます。

基本的に、forEach文は同じ処理を各要素全てに繰り返しおこなうため、途中で中断することができません。どうしても処理の途中で中断させたい場合は、通常のfor文を利用しましょう。

6.【上級編】コールバック関数の使い方

コールバック関数には、value、index、arrayの3種類の引数が用意されています。それぞれ配列の要素に対して値、インデックス番号、配列の元データが格納されます。

これらを応用した具体例として、次のコードを見てみましょう。

var numList = [1, 2, 3, 4, 5]; numList.forEach(function(value, index, array) { array[index] = value * 2; }); console.log(numList);

ここでは、forEach文のコールバック関数において、要素の値を2倍したものを元の配列に戻して上書きしています。したがって、処理の結果は『2, 4, 6, 8, 10』となります。

7.まとめ

今回は、JavaScriptにおけるforEach文について解説しました。

プログラミングにおいて、ループ処理は必須スキルといえるでしょう。その中でも特にforEach文はとても使い勝手が良く、効率よく配列の中身を処理することができます。

この記事でポイントを整理しながらしっかり理解し、うまく使いこなせるようになりましょう。