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は学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
