JavaScriptのbreak文の使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのbreak文の使い方について現役エンジニアが解説しています。break分とは、繰り返し処理中に処理を抜けたいときなどに使用する文で、繰り返し処理をスキップするcontinue文もあります。多重ループを一度に抜けるラベル付きブロックなども解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptのbreak文の使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのbreak文の使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

break文とは

break分とは、繰り返し処理中に処理を抜けたいときに使用する文法です。

10回のループ処理の5回目で処理を抜けたり、特定の値にマッチした際に処理を抜けることが可能です。
 

break文の使い方

breakが利用できるのは、繰り返し分やswitch分などです。関数を抜け出す時などには利用できませんので注意して下さい。

例えば、配列の内容を確認しながら、条件にあてはまる値があった場合に処理を止めたいときなどに利用します。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

多重ループでのbreak文の使い方

breakは、今処理している繰り返し処理を抜けることができます。

そのため多重ループ内で処理を抜けるには、各ループ内でbreakを入れる必要があります。

ただし、一気に多重ループを抜けたいときは、ラベル付きブロックを利用して抜ける方法もあります。

 

break文とcontinue文の違い

break文と混同しやすいのが、continue分です。

break文は処理を中断し、繰り返しを抜けたい時に使いますが、continueは以降の処理を飛ばし、次の繰り返し処理に入ります。

 

実際に書いてみよう

<!DOCTYPE html>

<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>JavaScriptでbreak方法</title>
</head>

<body>
<h1>JavaScriptでbreak</h1>
<p>consoleログで動きを確認して下さい。<br>
↓↓↓↓↓↓↓↓↓↓↓↓↓<br>
配列のループ:ネコ<br>
中の繰り返し:1回目<br>
中の繰り返し:2回目<br>
中の繰り返し:3回目<br>
サル以外の中の繰り返し3回目は、中のループを抜けます<br>
配列のループ:イヌ<br>
中の繰り返し:1回目<br>
中の繰り返し:2回目<br>
中の繰り返し:3回目<br>
サル以外の中の繰り返し3回目は、中のループを抜けます<br>
配列のループ:ウサギ<br>
ウサギの出現で中のループにはいかずに、次の動物へ<br>
配列のループ:キツネ<br>
中の繰り返し:1回目<br>
中の繰り返し:2回目<br>
中の繰り返し:3回目<br>
サル以外の中の繰り返し3回目は、中のループを抜けます<br>
配列のループ:サル<br>
中の繰り返し:1回目<br>
中の繰り返し:2回目<br>
中の繰り返し:3回目<br>
サルの中の繰り返し3回目は、全部抜けます<br>
一気に抜けました!<br>
</p>
<script type="text/javascript">
var Animal = ["ネコ","イヌ","ウサギ","キツネ","サル","ライオン","パンダ","イグアナ"]
var AniCnt = Animal.length
var BrkFlg = 0
var CtnFlg = 0

ALL_EXIT:
for(var i = 0; i < AniCnt; i++) {
console.log("配列のループ:" + Animal[i])
if (Animal[i] == "ウサギ") {
console.log("ウサギの出現で中のループにはいかずに、次の動物へ")
continue
}
for (var j = 0; j < 5; j++) {
console.log("中の繰り返し:" + (j + 1) + "回目")
if (j == 2) {
if (Animal[i] != "サル") {
BrkFlg++
console.log("サル以外の中の繰り返し3回目は、中のループを抜けます")
break
}
console.log("サルの中の繰り返し3回目は、全部抜けます")
break ALL_EXIT
}
}
}
console.log("一気に抜けました!")

</script>
</body>
</html>

 

筆者プロフィール

この記事を監修してくれた方

小宮山晃史(こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。