JavaScriptのforEachでbreak/continueを擬似的に使う方法をわかりやすく解説

JavaScriptでは、配列をループ処理できるforEachメソッドがあります。

const array = [1, 2, 3, 4, 5];

array.forEach((value, index) => {
  console.log(value, index);
});

よく勘違いされるのですが、このforEachメソッドは、breakやcontinueを使ってループを制御することができません。

しかし、特定の条件のときにループ処理を中断したり、次のループ処理に移ったりしたいこともありますよね。

そこで本記事では、forEachメソッドでbreakやcontinueを使う方法を解説します！

また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！

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 statement

continueも同様のエラーが発生します。

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 を学習できる Udemy 講座人気ランキング

ちなみに姉妹サイトの Learning Next では、JavaScript を独学で学べる Udemy 講座の人気ランキングや、各講座の受講生レビューをもとにした分析スコアを公開しています。

「学習にあまりお金をかけたくない…」「スクールに通う時間がない」という方は、こちらを参考に Udemy 講座の学習も検討してはいかがでしょうか？

▶️ UdemyでJavaScriptを学べる講座の人気ランキング – Learning Next

ひとめで良い点・悪い点、さらにおすすめポイントが分かりますので、講座選びで失敗したくない方はぜひ活用してみてください！