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

当サイトでは一部リンクに広告が含まれています
frontend_Designer_girl_re

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

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

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

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




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

そこで本記事では、forEachメソッドでbreakcontinueを使う方法を解説します!


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

  • 現役のフルスタックWebエンジニアとして活躍中
  • プログラミングスクールで教材を執筆した経験アリ
  • 副業でプログラミングスクール講師をしている教育のプロ
目次

break/continueとは?

まず、初心者の方向けにbreakcontinueについて簡単に説明します。

breakとは:ループ処理を中断する

breakは、ループ処理を中断するためのキーワードです。

JavaScriptでは、for文やwhile文などのループ処理を行う際に、breakを使ってループ処理を中断することができます。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

上記のコードでは、i5のときにbreakが実行されるため、i5のときにループ処理が中断されます。

continueとは:次のループ処理に移る

continueは、ループ処理を中断せずに次のループ処理に移るためのキーワードです。

JavaScriptでは、for文やwhile文などのループ処理を行う際に、continueを使ってループ処理を中断せずに次のループ処理に移ることができます。

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

上記のコードでは、i5のときにcontinueが実行されるため、i5のときにループ処理が中断されずに次のループ処理に移ります。

JavaScriptのforEachではbreak/continueは使えない

先述の通り、forEachメソッドではbreakcontinueを使ってループ処理を制御することができません。

使えるのは、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メソッドは、配列の各要素に対して関数を実行しますが、breakcontinueのような制御構造を直接使うことはできません。

しかし、いくつかのテクニックを使うことでこれらの機能を代替することが可能です。

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メソッドでbreakcontinueのようにループ処理を制御するには、throwreturnを活用する方法があります。

しかし、これらの方法は通常のループ制御とは異なるため、コードの読み手にとっては混乱を招く可能性があることを理解しておく必要があります。

そのため、無理せず forwhileで済ませられないかも検討しておくと安心です。

JavaScript を学習するなら本がおすすめ!

この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。

ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。




そのため、たった一冊だけでも OK なので本を使ってサクッと学習しておくのがおすすめです!

JavaScript はフロントエンドのすべてに通じますので、全体像をちゃんと学んでおくと給与アップにもつながりますよ。




ご自身のレベル別に JavaScript 本をおすすめしている記事がありますので、ぜひこちらも読んでみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フルスタックWebエンジニアであり、プログラミングスクール講師でもあります。
プログラミングスクールのカリキュラム執筆にも携わっており、プログラミング教材に精通しています。
Rails / React / Next.js / Vue.js / AWS が得意技術。

目次