JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのbreak文とcontinue文の違いを徹底解説！サンプルコードで学ぶ使い分け

JavaScriptには、ループの流れを制御するための構文としてbreakステートメントとcontinueステートメントが用意されています。この2つはどちらもループ内で使われる制御文ですが、動作はまったく異なります。本記事では、それぞれの特徴と具体的なサンプルコードを通じて、両者の違いをわかりやすく解説します。

breakステートメントとは

breakステートメントは、ループを途中で強制的に終了させ、そのループ全体から抜け出すために使われます。breakが実行されると、それ以降のループ処理は一切行われず、プログラムの制御はループの閉じ波括弧の直後にある処理へ移ります。

「条件が満たされた時点でもうループを続ける必要がない」といった場面で活用されるのがbreakです。

breakのサンプルコード

以下の例は、whileループと組み合わせてbreakを使用したものです。変数xが5になった時点でループが中断され、閉じ波括弧の直後にあるdocument.write()の処理へ制御が移る様子を確認できます。

<html>
   <body>
      <script>
         var x = 1;
         document.write("Entering the loop<br /> ");
         while (x < 20) {
            if (x == 5) {
               break;      // ループを完全に抜け出す
            }
            x = x + 1;
            document.write( x + "<br />");
         }
         document.write("Exiting the loop!<br /> ");
      </script>
   </body>
</html>

このコードを実行すると、xが1〜4まで出力された後、xが5になった時点でbreakによりループが終了し、「Exiting the loop!」が出力されます。条件式は「x < 20」となっているにもかかわらず、breakによって早期に終了している点に注目してください。

continueステートメントとは

continueステートメントは、現在の反復（イテレーション）の残りの処理をスキップし、直ちに次の反復へ移るようインタプリタに指示します。continueが実行されると、プログラムの流れは即座にループの条件判定へ移り、条件がtrueであれば次の反復が開始され、falseであればループを抜けます。

つまり、continueは「1回分の反復だけを飛ばす」働きを持ちます。「特定の値のときだけ処理を省略したい」という場合に便利です。

continueのサンプルコード

以下の例は、whileループと組み合わせてcontinueを使用したものです。変数xが8になったときだけ出力処理がスキップされる様子を確認できます。

<html>
   <body>
      <script>
         var x = 1;
         document.write("Entering the loop<br /> ");

         while (x < 10) {
            x = x + 1;
            if (x == 8) {
               continue;   // ループ本体の残りをスキップ
            }
            document.write( x + "<br />");
         }
         document.write("Exiting the loop!<br /> ");
      </script>
   </body>
</html>

このコードを実行すると、2〜7までの出力の後、xが8のときだけdocument.write()が実行されず、9と10が出力されてからループが終了します。ループ自体は最後まで継続している点が、breakとの大きな違いです。

breakとcontinueの違いまとめ

項目breakcontinue
ループへの影響ループを完全に終了する現在の反復のみスキップする
その後の処理ループ直後のコードへ制御が移る条件判定へ戻り、次の反復へ進む
主な用途目的を達成したら早めにループを抜ける特定の条件のときだけ処理を省略する

このように、breakは「ループからの脱出」、continueは「1回分のスキップ」という明確な違いがあります。なお、本記事のサンプルでは説明をシンプルにするためにdocument.write()を使用していますが、実際の開発ではconsole.log()などを使うのが一般的です。用途に応じてbreakとcontinueを適切に使い分けることで、より読みやすく効率的なJavaScriptコードを書くことができます。

  1. JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説

    JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形 まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例 メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails

  2. JavaとJavaScriptの違いとは？歴史・技術・使い分けを徹底解説

    ウェブ開発者のジェレミー・キースは2009年、「JavaとJavaScriptの関係は、ハムとハムスターの関係のようなものだ」と語りました。この比喩がどれほど正確かは議論の余地がありますが、その本質は的確です。共通する言語的ルーツを持つにもかかわらず、JavaとJavaScriptはまったく異なる2つのプログラミング言語なのです。年月とともに両者の重なりも多少増えましたが、今なおJavaScriptはウェブサイトにインタラクティブ性をもたらすフロントエンド言語の主流であり続け、Javaはサーバーサイドやアプリケーション開発で人気を保っています。開発者を採用したい方、プログラミングを学びたい方