JavaScriptでは、配列をループ処理できるforEachメソッドがあります。
const array = [1, 2, 3, 4, 5];
array.forEach((value, index) => {
console.log(value, index);
});よく勘違いされるのですが、このforEachメソッドは、breakやcontinueを使ってループを制御することができません。
しかし、特定の条件のときにループ処理を中断したり、次のループ処理に移ったりしたいこともありますよね。
そこで本記事では、forEachメソッドでbreakやcontinueを使う方法を解説します！
また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！
- 現役のフルスタックWebエンジニアとして活躍中
- プログラミングスクールで教材を執筆した経験アリ
- 副業でプログラミングスクール講師をしている教育のプロ
break/continueとは？
まず、初心者の方向けにbreakやcontinueについて簡単に説明します。
breakとは：ループ処理を中断する
breakは、ループ処理を中断するためのキーワードです。
JavaScriptでは、for文やwhile文などのループ処理を行う際に、breakを使ってループ処理を中断することができます。
for (let i = 0; i < 10; i++) {
if (i === 5) {
break;
}
console.log(i);
}上記のコードでは、iが5のときにbreakが実行されるため、iが5のときにループ処理が中断されます。
continueとは：次のループ処理に移る
continueは、ループ処理を中断せずに次のループ処理に移るためのキーワードです。
JavaScriptでは、for文やwhile文などのループ処理を行う際に、continueを使ってループ処理を中断せずに次のループ処理に移ることができます。
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue;
}
console.log(i);
}上記のコードでは、iが5のときにcontinueが実行されるため、iが5のときにループ処理が中断されずに次のループ処理に移ります。
JavaScriptのforEachではbreak/continueは使えない
先述の通り、forEachメソッドではbreakやcontinueを使ってループ処理を制御することができません。
使えるのは、JavaScriptのfor文やwhile文などです。
実際、使ってみるとどうなるかを見てみましょう。
const array = [1, 2, 3, 4, 5];
array.forEach((value, index) => {
if (value === 3) {
break;
}
console.log(value, index);
});一見、breakが使えているように見えますが、実際に実行してみるとエラーが発生します。
Uncaught SyntaxError: Illegal break statementcontinueも同様のエラーが発生します。
forEachでbreak/continueのようにループ処理を制御する方法
forEachメソッドは、配列の各要素に対して関数を実行しますが、breakやcontinueのような制御構造を直接使うことはできません。
しかし、いくつかのテクニックを使うことでこれらの機能を代替することが可能です。
breakの代わりにthrowを使って例外を発生させる
forEachメソッド内で特定の条件に達したときにループを中断したい場合、例外処理を利用する方法があります。
これはthrowキーワードを使って例外を発生させ、catchブロックでその例外を捕捉することで実現します。
const array = [1, 2, 3, 4, 5];
try {
array.forEach((value, index) => {
if (value === 3) {
throw 'break'; // 特定の条件で例外を投げる
}
console.log(value, index);
});
} catch (e) {
if (e !== 'break') {
throw e; // 予期せぬエラーの場合は再スロー
}
// ここに中断後の処理を記述
}この方法は、特定の条件でループを即座に中断させることができます。
ただし、例外処理をこのように使うことは一般的ではなく、他のコードの読み手にとっては予期せぬ挙動となる可能性があるため、使用は慎重に行うべきです。
continueの代わりにreturnを使ってスキップする
forEachメソッド内で特定の条件の場合にそのループ処理をスキップしたい場合、return文を使うことで実現できます。
これはforEachのコールバック関数内でのみ動作し、ループを中断するわけではない点に注意が必要です。
array.forEach((value, index) => {
if (value === 3) {
return; // 特定の条件で現在のループ処理をスキップ
}
console.log(value, index);
});この方法は、ループ全体を中断するのではなく、特定の条件下でのみ現在のループ処理をスキップし、次のループ処理に進むために使用されます。これによりcontinueに似た動作を実現できます。
まとめ
forEachメソッドでbreakやcontinueのようにループ処理を制御するには、throwとreturnを活用する方法があります。
しかし、これらの方法は通常のループ制御とは異なるため、コードの読み手にとっては混乱を招く可能性があることを理解しておく必要があります。
そのため、無理せず forやwhileで済ませられないかも検討しておくと安心です。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
