JavaScript ラベルでループ処理を抜けだす方法|break

どうもかわうそです！

今日は『JavaScript ラベルでループ処理を抜けだす方法』を解説していきます！

ループ処理のbreakにラベルが必要になる例

ラベルを付けると、ループ処理がネストしている＝入れ子状態になっている処理でbreakする際便利です！

例えば、

 for(var i = 1; i < 10 ; i++){
       for ( var k = 1; k < 10 ; k++){
          var j = i * k;
          document.write(`${j}&nbsp`);
       }
     document.write('</br>');
    }

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

for ( var k = 1; k < 10 ; k++){

var j = i * k;

document.write(`${j}&nbsp`);

}

document.write('</br>');

}

こんなループ処理があったとしましょう。

実行結果は

1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81

九九になりますね。

計算結果が50を超えたらループ処理を停止するように、breakを記述するとどうなるでしょうか。

 for(var i = 1; i < 10 ; i++){
       for ( var k = 1; k < 10 ; k++){
          var j = i * k;
           if( j >= 50 ){ break;}
          document.write(`${j}&nbsp`);
       }
     document.write('</br>');
    }

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

for ( var k = 1; k < 10 ; k++){

var j = i * k;

if( j >= 50 ){ break;}

document.write(`${j}&nbsp`);

}

document.write('</br>');

}

実行結果は、、、

1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48
7 14 21 28 35 42 49
8 16 24 32 40 48
9 18 27 36 45

ありゃりゃ？？50を超えても、次の段に進んでしまってますね・・・

[memo title=”ネストでのbrake”]ネストしている場合は、自分が所属している直近のループしかbrakeされない。[/memo]

6×9＝54の時点でループ処理全体をbreakしたい場合はどうすればいいのでしょうか。

そんな時にラベルが役立ちます！

ラベルでループ処理をbreakする

さきほどまでのループ処理にラベルを付けて、そのラベルのついたループ処理をbrakeしてみます。

label :
for(var i = 1; i < 10 ; i++){
      for ( var k = 1; k < 10 ; k++){
         var j = i * k;
          if( j >= 50 ){ break label;}
         document.write(`${j}&nbsp`);
      }
    document.write('</br>');
   }