JavaScript foreachとは？特徴や使い方、注意点を事例付きで紹介

「foreachってどうやって使うの？」
「for文との違いがよくわからない…」
「なぜかforeachの部分でエラーが出てしまう…」

あなたはこのような疑問を持っていませんか？

for文と同様に繰り返し処理ができるforeachですが、わざわざforeachを使う理由を理解できていない方もいるはず。

いざforeachを勉強して使ってみたけれど、エラーが出てしまい困っている方もいるでしょう。

実はforeachには使用する上でのポイントがあり、これを知らなければ使いこなすことが難しいんですよね。

そこで、今回はforeachの使い方を、使いこなすためのポイントや注意点も交えて紹介します。

この記事を読めば、はじめてforeachを学ぶ人でもポイントや注意点を理解でき使いこなせるようになりますよ。

それでは参ります。

JavaScript foreachとは？

JavaScript foreachは配列の中身すべてを一度に処理する構文です。配列の要素を一気に処理したい時に良く使われます。

例えば数学の得点や所属している人の名前などをまとめた配列に対して、配列の各要素に処理をしたいときがあったとします。

そういったときに役立つのがforeachなんですね。

次にforeachの構文を見てみましょう。

istname.forEach( function( value ){ … });

listnameは配列の名前で、listnameをforEachによって各要素に処理をしているのがわかります。

そしてvalueには取り出した要素を格納する変数で、function内でvalueを利用して処理の内容を記述しているんですね。

JavaScript foreachの特徴

とはいえ、配列の各要素を取り出して処理を行うのはfor文でも使えます。つまりforeachの使い方を知らなくてもほとんどの場合、for文で何とかなってしまうんですね。

これだけ聞くと、「じゃあforeachって何のためにあるの？」と思ってしまいますよね。

ですがforeachには、for文にはない次の3つのメリットがあります。

これらの特徴について、実際にプログラムを載せながら解説していきます。

for文よりも綺麗で見やすい形にできる

foreachを使うことでfor文よりきれいな形でコードを書けるんですね。どのくらい見やすくなるのか、実際に見ていきましょう。

var name = ['斎藤','鈴木','中川','吉田','渡辺'];
for(var i=0; i<5; i++){
print(name[i]);
}

// 実行結果
斎藤
鈴木
中川
吉田
渡辺

上記のコードはfor文で配列の中身を1つずつ取り出しているコードとなっています。実行結果もうまくいっているので問題ない気がしますよね。

では、foreachを使うとどのようになるのでしょうか。それが以下のコードです。

var name = ['斎藤','鈴木','中川','吉田','渡辺'];
name.forEach( function( value ){
print(value);
});

// 実行結果
斎藤
鈴木
中川
吉田
渡辺

実行結果は先ほどと同じような結果が得られました。先ほどより見やすくなっていませんか？

foreachはただ全ての配列の値をvalueに入れて処理しているだけなので、確かにforeachの方が見やすくなるわけなんですね。

また見やすくなるだけでなく、後で見返すときにもforeachは輝いてきます。

例えば他人からわからないことを聞かれて、他人が書いたコードを見ることになったとしましょう。

そしてコードを見た瞬間にfor文で書かれたコードは何か繰り返しをするということしかわかりませんが、foreachは配列の処理であるのがわかります。

つまりどんなことをしているのかを明確にできる点で、foreachはfor文よりも見返したときにわかりやすい記述ができるわけなんですね。

ラムダ式で記述できる

foreachはラムダ式で記述することもできます。ラムダ式というのは、ざっくり解説すると関数を変数と同じように扱えるもので、アロー演算子を用いて記述できるんですね。

実際にプログラムで書くと以下のようになります。

var name = ['斎藤','鈴木','中川','吉田','渡辺'];
name.forEach( value => console.log(value) );

// 実行結果
斎藤
鈴木
中川
吉田
渡辺

しっかりと実行結果は先ほどと同じようになっていますね。

そしてforeachの部分を見てください。3行使っていたforeachが1行に収まり、よりわかりやすいコードになっていませんか？

このようにラムダ式を用いるとさらに何が行われているかすぐにわかるようになるんですね。

ラムダ式を使わない場合でも1行に収められますが、少し見づらくなってしまうので1行で書くならラムダ式を使うのが良いでしょう。

簡単に番号をつけて表示できる

繰り返し処理をしていると、「出力したものに番号を振りたい！」と思った方もいるはず。

foreachでは番号を付けながらの処理もしっかりとできます。まずはfor文から見ていきましょう。

var name = ['斎藤','鈴木','中川','吉田','渡辺'];
for(var i=0; i<5; i++){
console.log(i + " : " + name[i]);
}

// 実行結果
0 : 斎藤
1 : 鈴木
2 : 中川
3 : 吉田
4 : 渡辺

for文で定義した変数iを番号代わりとして使っていますね。このようにfor文は比較的簡単に番号を振れますよ。

var name = ['斎藤','鈴木','中川','吉田','渡辺'];
name.forEach( (value,index) => console.log(index + " : " + value) );

// 実行結果
0 : 斎藤
1 : 鈴木
2 : 中川
3 : 吉田
4 : 渡辺

ではforeachではどうなるのでしょうか？

上記のコードでもfor文を使った場合と同じような実行結果が得られています。

foreachの場合は、indexという要素のインデックスを格納する変数をつけ足すだけ。実はforeachでも比較的簡単に番号が振れちゃうんですよ。

つまりラムダ式として書けるforeachの方が見やすくなるんですよね。

foreachの使い方

基本的な使い方がわかったところで、実際にforeachを使った問題を解いていきましょう。

「foreachが何なのかはわかったけど、どうやって使うんだろう？」と疑問に思った方は、ぜひプログラムを組んでみて使い方をマスターしてみてくださいね。

使用例1 連想配列の値をすべて足した合計を求める

連想配列point = {斎藤:60,鈴木:80,中川:90,吉田:75,渡辺:70}があった時、すべての得点を足した合計を求めるプログラムを作ってみましょう。

まず気を付ける点として、連想配列はオブジェクトなのでこのままではforeachが使えません。

それを知らずにpointの各要素を変数に入れようとするとタイプエラーを起こしてしまいます。

point.forEach( function ( key ){ …
^
TypeError: point.forEach is not a function

エラーを防ぐためには配列要素のキーだけを取得し、キーに対応する値を取り出せるようにすれば良さそうですね。

foreachを使ってキーだけを取得する方法は、Object.keys()というものを使います。

これは指定した連想配列のキーを返してくれるため、Object.keys()を使ってforeachで回せば得点を取り出せそうですね。

あとは取り出した値を足していって、最後に合計点を出力すればOKです。

var point = {斎藤:60,鈴木:80,中川:90,吉田:75,渡辺:70};
var sum = 0;
Object.keys(point).forEach( function ( key ){
sum += point[key];
});
console.log(sum);

// 実行結果
375

使用例2 3の倍数である数だけを出力する

1から10までの数字の配列を作り、foreachで3の倍数である数字だけを出力してみます。

この問題のポイントは3の倍数のみを出力することです。それ以外は無視するのでif文で条件分岐してあげる必要がありそうですね。

次に3の倍数であるかどうかの条件を考えてみましょう。3の倍数かどうかは3で割りきれるかで判別ができますよね。つまり条件は「value % 3 == 0」で判別できます。

「value % 3」というのはvalueを3で割った時の余りを求める式で、これが0ならば3の倍数であると求められるわけなんですね。

あとは条件をforeachの中に書いてあげれば完成です。完成したプログラムは以下のようになります。

var number = [1,2,3,4,5,6,7,8,9,10];
number.forEach( function ( value ){
if(value % 3 == 0) console.log(value+"が3の倍数です。");
});

// 実行結果
3が3の倍数です。
6が3の倍数です。
9が3の倍数です。

foreachの注意点

foreachを使っているとよくわからないエラーに陥ってしまうことってありませんか？もしかすると、あなたは次のエラーを起こす原因を作っているかもしれません。

引数に返り値がundefinedのものを使っている
breakやcontinueを使っている

「なんで出力ができないの？」と悩む人のために、ここではforeachの注意点について解説していきます。

注意点1 返り値がundefinedのものは使用できない

使用例2のプログラムは3の倍数のみを出力するものでした。中身を見るとforeachはfunction…から始まっています。

function findNum(num){
if(num % 3 == 0) console.log(num + "が3の倍数です。");
}

上記のようにfindNum関数を作れば、foreachのfunction…部分をfindNumに置き換えることができそうに見えますよね。

しかし、実際には書き換えできないんです。以下のプログラムを見てみましょう。

var number = [1,2,3,4,5,6,7,8,9,10];
function findNum(num){
if(num % 3 == 0) console.log(num + "が3の倍数です。");
}
number.forEach(findNum(number));

// 実行結果
number.forEach(findNum(number));
^
TypeError: undefined is not a function

実行すると上記のエラーが出てしまいました。内容を見るとundefinedにはforeachが使えないよと言われていますね。

foreachで指定した引数にはfindNum関数が指定されていますが、findNumの指定先はundefinedになります。つまりforeachが使えないわけなんですね。

findNumを使ってforeachで処理できるようにするためには、findNum関数を呼ぶ関数の変数を指定しなければなりません。

正しいコードは次のようになります。

var number = [1,2,3,4,5,6,7,8,9,10];
function findNum(num){
if(num % 3 == 0) console.log(num + "が3の倍数です。");
}
number.forEach(function (num){
findNum(num);
});

// 実行結果
3が3の倍数です。
6が3の倍数です。
9が3の倍数です。

今度はしっかりと通りましたね。中の処理は関数で省略できても、function(num)…まで省略はできませんので注意しまししょう。

foreachで新しい変数を作ることを意識して書けばエラーを防げますよ。

注意点2 途中でbreakができない

foreachを使っているとき、「この条件でbreakしたいな…」と思うことってありますよね。

ところがbreakを入れて実行してみると、

var number = [1,2,3,4,5,6,7,8,9,10];
number.forEach( function (num){
if (num == 3) break;
console.log(num);
});

// 実行結果
if (num == 3) break;
^^^^^
SyntaxError: Illegal break statement

エラーが出てしまって困ってしまうはず。foreachでbreakしたいときはどうすればいいのでしょうか？

実は、foreachでbreakする方法はないんです。

foreachは配列の各要素に対して同じ処理をする構文ですから、途中で抜けるのはできないんですね。

そのためbreakを使いたい場合は、for-ofなどのfor文を使うしかありません。

var number = [1,2,3,4,5,6,7,8,9,10];
for(var num of number){
if(num == 5) break;
console.log(num)
}

// 実行結果
1
2
3
4

一方でcontinueすることは可能です。

foreachでcontinueする方法は代わりにreturnをすればよいだけ。foreachはreturnを返した時点で次の処理に移行するため、結果としてcontinueの代わりとして働いてくれるわけですね。

もちろんcontinueと書くとエラーを起こしてしまうので気を付けてくださいね。

var number = [1,2,3,4,5,6,7,8,9,10];
number.forEach( function (num){
if (num <= 5) return;
console.log(num);
});

// 実行結果
6
7
8
9
10

JavaScript foreachを学習する方法

foreachをマスターするには、自分の手でプログラムを書いていくのが一番良いでしょう。

foreach自体は簡単なので、実際にプログラムを書いてどのように動いているか理解できれば問題ありません。

また参考書を購入するのもいいですね。参考書ならforeachだけでなく、for文のあれこれも合わせて理解できるので効率よく学習できますよ。

「でもJavaScriptの参考書なんてたくさんあるし、どれをけばいいのかわからない…」と悩んでしまう方は、以下の記事でおすすめの参考書を紹介しているので参考にしてみてください。

→【2021年最新】Javascriptの学習本・参考書おすすめ13選！初心者から経験者まで

まとめ

今回はJavaScript foreachについて解説しました。

for文との違いについてメリットや注意点などを紹介しましたが、基本的にはほとんどfor文と同じなんですね。さらには、似たような構文にfor-ofやfor-inなどもあります。

特にこういう時はforeachを使えという決まりはないため、自分が書きやすい構文を使うのが一番良いですね。

ですがそれぞれメリットやデメリットは違ってきますから、状況に応じて使えるようになるといいですよ。