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

【JavaScript】ラベル付きbreakとラベルなしbreakの違いを徹底解説

ラベルなしのbreak文

break文は、ループを途中で終了させるために使用される構文です。実行されると、そのbreak文を囲んでいる最も内側のブロック（波括弧 {}）から抜け出し、ループ全体の処理を終了します。つまり、ラベルを指定しない場合、breakは直近のループ1つだけを抜けます。

サンプルコード

以下は、JavaScriptでラベルを使わずにbreak文を使用する例です。

<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が5になった時点でbreak文が実行され、whileループから完全に抜け出します。そのため、出力には「Entering the loop」の後に2〜5までの数字が表示され、続いて「Exiting the loop!」が出力されて処理が終わります。

ラベル付きのbreak文

ラベル（label）は、プログラムの流れを制御するために使用される仕組みです。特に、ネストしたforループなどで、内側のループだけでなく外側のループまで一気に抜けたい場合に便利です。break文にラベル名を指定すると、そのラベルが付いたループ（またはブロック）から抜け出すことができます。

サンプルコード

以下のコードでは、ラベルとbreak文を組み合わせて処理の流れを制御しています。

<html>
   <body>
      <script>
         document.write("Entering the loop!<br /> ");
         outerloop: // ラベル名

         for (var i = 0; i < 5; i++) {
            document.write("Outerloop: " + i + "<br />");
            innerloop:
            for (var j = 0; j < 5; j++) {
               if (j > 3 ) break ; // 最も内側のループを抜ける
               if (i == 2) break innerloop; // 内側のループを抜ける
               if (i == 4) break outerloop; // 外側のループごと抜ける
               document.write("Innerloop: " + j + " <br />");
            }
         }

         document.write("Exiting the loop!<br /> ");
      </script>
   </body>
</html>

この例では、「outerloop」と「innerloop」という2つのラベルを定義しています。それぞれのbreakの動作は次のとおりです。

  • j > 3 のとき： ラベルなしのbreakにより、最も内側のループだけを抜けます。
  • i == 2 のとき： 「break innerloop」により、内側のループを抜けて外側のループの次の繰り返しへ進みます。
  • i == 4 のとき： 「break outerloop」により、外側のループごと完全に終了します。

まとめ：両者の違い

ラベル付きとラベルなしのbreak文の違いを整理すると、次のようになります。

  • ラベルなしのbreak： 直近の（最も内側の）ループのみを抜ける。
  • ラベル付きのbreak： 指定したラベルの位置まで一気に抜けるため、ネストした複数のループをまとめて終了できる。

多重ループの中で特定の条件を満たした時点ですべての処理を打ち切りたい場合などは、ラベル付きbreakを使うことでコードをシンプルに保てます。ただし、乱用すると処理の流れが追いにくくなるため、可読性とのバランスを考えて使用することが大切です。

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

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

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

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