スライドショースライドショー

【JavaScript入門】breakでループを抜ける(forEachの代替手段も解説)

こんにちは、エンジニアの若月です。

突然ですが、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文の使い方については、こちらで詳しく解説していますので、ぜひ参考にしてください。

【JavaScript入門】for文のループ処理はこれで完璧! for-in / for-of / forEach文も徹底解説!
更新日 : 2019年7月4日

while文でbreakを使う方法

while文においても、for文と同様にループ処理を抜け出すときにbreakを使います。

var i = 0;

while (i < 100) {
  if (i > 50) {
    break;
  }
  i = i + 1; 
}
console.log(i + '回ループされました');

実行結果:

> "51回ループされました"

while文の使い方については、こちらで詳しく解説していますので、ぜひ参考にしてください。

【JavaScript入門】while文でループ処理と制御(break/continue)
更新日 : 2018年6月14日

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文の使い方については、こちらで詳しく解説していますので、ぜひ参考にしてください。

【JavaScript入門】Switch文で条件分岐する方法(default/break)
更新日 : 2019年4月23日

多重ループで「ラベル」へ抜ける方法

また多重ループ(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については、こちらで詳しく解説していますので、ぜひ参考にしてください。

【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ!
更新日 : 2019年6月5日

someについては、こちらで詳しく解説していますので、ぜひ参考にしてください。

【JavaScript入門】配列の要素を検索する4つの方法!
更新日 : 2019年4月28日

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についてわからないことがあったら、ぜひこの記事を参考にしてみてください!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説