【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を使う例です。

ブラウザのコンソールなどで試してみましょう。以下のように表示されるはずです。

これは、valueが1*10、2*10…と増えていって、30になったらループ処理を抜け出すというような処理になります。

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

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

while文でbreakを使う方法

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

実行結果:

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

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

switch文でbreakを使う方法

繰り返し文以外でも、breakを使う文があります。

それがswitch文です。

switch文は、条件によって処理を切り分ける際に使われますが、選択した処理だけ実行して、他の処理は実行されないようにするためにbreakを使います。

実行結果:

このように、指定した「red」の場合の処理だけを行い、そのあとの「blue」や「yellow」の場合の処理を省略するときに使われます。

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

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

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

また多重ループ(for文のなかにfor文を入れ子にする)を使用するときに、「ラベル」をつけることで、ラベル先へ抜けることができます。

デフォルトでは、一番近いfor文のループ処理から抜けるようになっています。

以下のサンプルコードをみてみましょう。

実行結果:

以上のように、外側のループは引き続き繰り返されます。

それでは、ラベルをつけて外のループから抜けるようにbreakを書いてみましょう。

実行結果:

このように、jの値が3になると、外側のループ処理が終了し、二回目以降は実行されていないことがわかります。

continueとの違い

次に、同様に繰り返し文の中で使われるcontinue文との違いについて解説していきます。

continue文は、ループから途中で抜けるのではなく、その回の処理をスキップするときに使用します。

先ほどのサンプルコードのbreakを、continueに変えてみましょう。

実行結果:

breakのときは、30が出力されたあとはループ処理が終了していましたが、continueの場合は30のときだけスキップして最後までループ処理が行われているのがわかります。

似たようなところで使いますが処理の結果は大きく違うので、違いを覚えておきましょう!

breakの注意点

forEach内では使えない

JavaScriptには、for文よりも簡単に配列をループするforEachという関数が用意されています。

for文と似ていますが、この関数内ではbreakを使うことができません。

配列の繰り返しの中で途中でループから抜けるようにしたい場合は、someメソッドのような配列のテストメソッドを代わりに使いましょう。

また、someメソッドなどを使う場合は、breakではなく、return true;として値を返すことでメソッドの処理が終了します。

実行結果:

ただし、実践的な開発では問題点もあり、for文で書くのが好ましいようです。

あくまで「for文を使わない際にはこういった書き方をする」という風に覚えておきましょう。

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

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

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

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

switch文でのフォールスルー

switch文の中では、あえてbreakを省略する場合があります。

実行結果:

このように、switch文においては下のcase文を続けて実行させるために、あえてbreakを書かないこともあります。

ただしこれも、あまり推奨される書き方ではないため、使用の際には注意しましょう。

まとめ

今回の記事では、breakの基本からラベルを指定した応用的な使い方、また使用上の注意点などを解説しました。

基本的な使い方だけでなく、ラベルなどの応用的なbreakの使い方を知っておくと、より効率的なコーディングに役立つと思います。

JavaScriptの様々な文法のなかで、breakはとても重要な役割を果たしています。

breakについてわからないことがあったら、ぜひこの記事を参考にしてみてください!

エラーばかりでプログラミング学習が進まない、と悩んでいませんか?

プログラミング学習を始めたけれど、エラーの原因がよく分からなかったり、調べてみたけれど解決されず「どうやって進めればいいんだろう」と放置してそのまま挫折しかけていませんか?

一度進め方が分からなくなるとやる気も失せてしまいますよね。

そんなあなたにオススメしたいのが、「侍エンジニア塾」の無料体験レッスンです。独学で1000時間以上の学習が必要と言われているところを300時間に短縮する「プログラミング独学法」をお伝えします。

下記の無料体験レッスン予約カレンダーよりお申し込みいただけます。あなたのご相談を心よりお待ちしております。

LINEで送る
Pocket

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

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

おすすめコンテンツ

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

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