JavaScript【 break 】 ～ ループ処理を抜け出す

for文やwhile文を使って行うループ処理は、条件式の評価がtrueの間ループし続け、条件式の評価がfalseになった時点で処理が終了しますが、break文を使用すると、条件式の評価がtrueの間にループ処理から抜け出すことができます。
今回は、ループ処理時に使用するbreak文を紹介します。

1. break文とは

break文は、現在実行している一連の処理から抜ける際に使われるキーワードです。

switch文など、ループ処理以外でも使用します。

ループ処理の中にbreak文を記述すると、break文が読み込まれた時点でループ処理のブロックから抜け出すことができます。

通常は、ループ処理の条件式以外のある条件に合致したらループ処理を終了させたい場合に使用するので、if文の中にbreak文を記述することが多いです。

例えば、次のように記述します。

while ( 条件式 ) {

　　if ( ループから抜け出したい条件式 ) {
　　　　break;
　　}

　　繰り返し行う処理
}

　
break文を使うと、次のようなループ処理の書き方もできます。

while ( true ) {

　　if ( 条件式 ) {
　　　　break;
　　}

　　繰り返し行う処理
}

ループ処理自体は無条件としておいて、処理を続行するかどうかの判断をループ処理の中で行っています。

▲目次へ戻る

2. break文の使い方

次のサンプルは、入力された数字の約数を出力するプログラムです。
約数の数が多そうな数字を入力してOKボタンをクリックしてみて下さい。

　　
上のサンプルを、入力された数字の約数を小さい順に5つまで出力するプログラムに改めてみます。
上のサンプルと同じ数字を入力してOKボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
<!--
function loop() {

    var num = document.getElementById("dat");
    document.getElementById("dat2").value = "約数（昇順に5つ）：";
    var i = 1;
    var j = 0;

    while ( i <= num ) {

        if (num % i == 0){
            document.getElementById("dat2").value += i + "　";
            j++;

            if (j == 5){
                break;
            }
        }
        i++;
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <div style="display:inline-flex">　
          　<input type="text" id="dat" size="10">
          　<input type="button" value="OK" onClick="loop()">
        </div>
　
        <input type="text" id="dat2" value="約数（昇順に5つ）：">
    </form>
</div>

　
ループ処理の中で、約数の数をカウントするために、変数jを宣言して、初期値0を代入します。

    var j = 0;

そして、「num % i == 0」となる場合に、i が約数となりますが、i を出力した後で j をインクリメントして、その結果 j が5となった時点でbreak文を記述して、ループ処理を抜け出しています。
（ j は初期値が0のため、インクリメント後の値が、約数の数となります。）

        if (num % i == 0){
            document.getElementById("dat2").value += i + "　";
            j++;

            if (j == 5){
                break;
            }
        }

　
その他の、while文の内容については、while 文の使い方をご参照下さい。
　
　
上記のサンプルを、for文を使って記述すると、次のようになります。

<script type="text/javascript">
<!--
function loop() {

    var num = document.getElementById("dat");
    document.getElementById("dat2").value = "約数（昇順に5つ）：";
    var j = 0;

    for (var i = 1;  i <= num;  i++) {

        if (num % i == 0){
            document.getElementById("dat2").value += i + "　";
            j++;

            if (j == 5){
                break;
            }
        }
    }
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <div style="display:inline-flex">　
          　<input type="text" id="dat" size="10">
          　<input type="button" value="OK" onClick="loop()">
        </div>
　
        <input type="text" id="dat2" value="約数（昇順に5つ）：">
    </form>
</div>

▲目次へ戻る