こんにちは、エンジニアの若月です。
突然ですが、JavaScriptのbreakって使ってますか？
JavaScriptでは、繰り返し文の途中でループ処理から抜け出すためにbreakを使います。
また、多重ループでの使い方やswitch文でのフォールスルーも覚えれば、さらに効率的なプログラムを書くことができます。
この記事では、breakについて
・breakとは
・breakの使い方
・continueとの違い
などの基本的な内容をはじめ、
・多重ループでラベルへ抜ける方法
・breakの使用上の注意点
などの応用的な使い方まで、わかりやすく解説していきます！
breakとは
JavaScriptでbreakを使うと、繰り返し文（for 文、for…in 文、for…of 文、do…while 文、while 文、switch文）のループ処理から抜け出すことができます。
breakの使い方
for文でbreakを使う方法
for文でbreakを使う例です。
for (var i = 0; i < 6; i++) {
var value = i*10;
if (value == 30) {
break;
}
console.log(value);
}
ブラウザのコンソールなどで試してみましょう。以下のように表示されるはずです。
>0 >10 >20
これは、valueが1*10、2*10…と増えていって、30になったらループ処理を抜け出すというような処理になります。
for文の使い方については、こちらで詳しく解説していますので、ぜひ参考にしてください。
while文でbreakを使う方法
while文においても、for文と同様にループ処理を抜け出すときにbreakを使います。
var i = 0;
while (i < 100) {
if (i > 50) {
break;
}
i = i + 1;
}
console.log(i + '回ループされました');
実行結果：
> "51回ループされました"
while文の使い方については、こちらで詳しく解説していますので、ぜひ参考にしてください。
switch文でbreakを使う方法
繰り返し文以外でも、breakを使う文があります。
それがswitch文です。
switch文は、条件によって処理を切り分ける際に使われますが、選択した処理だけ実行して、他の処理は実行されないようにするためにbreakを使います。
var signal = 'red';
// 信号の色
switch (signal){
case 'red':
console.log("止まれ");
break;
case 'blue':
console.log("進め");
break;
case 'yellow':
console.log("注意");
break;
}
実行結果：
> "止まれ"
このように、指定した「red」の場合の処理だけを行い、そのあとの「blue」や「yellow」の場合の処理を省略するときに使われます。
switch文の使い方については、こちらで詳しく解説していますので、ぜひ参考にしてください。
多重ループで「ラベル」へ抜ける方法
また多重ループ（for文のなかにfor文を入れ子にする）を使用するときに、「ラベル」をつけることで、ラベル先へ抜けることができます。
デフォルトでは、一番近いfor文のループ処理から抜けるようになっています。
以下のサンプルコードをみてみましょう。
for(var i = 0; i < 2; i++) {
console.log("外のループ：" + (i + 1) + '回目\n');
for (var j = 0; j < 100; j++) {
if (j == 3) {
break;
}
console.log("中のループ：" + (j + 1) + '回目');
}
console.log('\n');
}
実行結果：
> "外のループ：1回目" > "中のループ：1回目" > "中のループ：2回目" > "中のループ：3回目" > > "外のループ：2回目" > "中のループ：1回目" > "中のループ：2回目" > "中のループ：3回目" >
以上のように、外側のループは引き続き繰り返されます。
それでは、ラベルをつけて外のループから抜けるようにbreakを書いてみましょう。
// for文にouter（外）というラベルをつける
outer:
for(var i = 0; i < 2; i++) {
console.log("外のループ：" + (i + 1) + '回目');
for (var j = 0; j < 100; j++) {
if (j == 3) {
break outer;
}
console.log("中のループ：" + (j + 1) + '回目');
}
console.log('\n');
}
実行結果：
> "外のループ：1回目" > "中のループ：1回目" > "中のループ：2回目" > "中のループ：3回目"
このように、jの値が3になると、外側のループ処理が終了し、二回目以降は実行されていないことがわかります。
continueとの違い
次に、同様に繰り返し文の中で使われるcontinue文との違いについて解説していきます。
continue文は、ループから途中で抜けるのではなく、その回の処理をスキップするときに使用します。
先ほどのサンプルコードのbreakを、continueに変えてみましょう。
for (var i = 0; i < 6; i++) {
var value = i*10;
if (value == 30) {
continue;
}
console.log(value);
}
実行結果：
>0 >10 >20 >40 >50
breakのときは、30が出力されたあとはループ処理が終了していましたが、continueの場合は30のときだけスキップして最後までループ処理が行われているのがわかります。
似たようなところで使いますが処理の結果は大きく違うので、違いを覚えておきましょう！
breakの注意点
forEach内では使えない
JavaScriptには、for文よりも簡単に配列をループするforEachという関数が用意されています。
for文と似ていますが、この関数内ではbreakを使うことができません。
配列の繰り返しの中で途中でループから抜けるようにしたい場合は、someメソッドのような配列のテストメソッドを代わりに使いましょう。
また、someメソッドなどを使う場合は、breakではなく、return true;として値を返すことでメソッドの処理が終了します。
array = [1,5,7, 9, 12,16,23];
array.some( function(value) {
if (value > 10) {
return true;
}
lastValue = value;
});
console.log(lastValue);
実行結果：
>9
ただし、実践的な開発では問題点もあり、for文で書くのが好ましいようです。
あくまで「for文を使わない際にはこういった書き方をする」という風に覚えておきましょう。
forEachについては、こちらで詳しく解説していますので、ぜひ参考にしてください。
someについては、こちらで詳しく解説していますので、ぜひ参考にしてください。
switch文でのフォールスルー
switch文の中では、あえてbreakを省略する場合があります。
var signal = 'yellow';
// 信号の色
switch (signal){
case 'yellow':
console.log("注意して");
case 'red':
console.log("止まれ");
break;
case 'blue':
console.log("進め");
break;
}
実行結果：
> "注意して" > "止まれ"
このように、switch文においては下のcase文を続けて実行させるために、あえてbreakを書かないこともあります。
ただしこれも、あまり推奨される書き方ではないため、使用の際には注意しましょう。
まとめ
今回の記事では、breakの基本からラベルを指定した応用的な使い方、また使用上の注意点などを解説しました。
基本的な使い方だけでなく、ラベルなどの応用的なbreakの使い方を知っておくと、より効率的なコーディングに役立つと思います。
JavaScriptの様々な文法のなかで、breakはとても重要な役割を果たしています。
breakについてわからないことがあったら、ぜひこの記事を参考にしてみてください！
