JavaScriptのbreakの使い方！(ループを抜ける)

JavaScriptのbreakの使い方について書いています。
breakの使い方について解説した後に、下記の内容について説明しています。

それぞれ、サンプルコードを載せて解説しています。

breakの使い方

breakを使うと、ループの途中で抜けることができます。
例えば、下記のように使えます。

for (let i = 0; i < 10; i++) {
  if(i === 5) {
    break
  }

  console.log(i)
}

最初にfor文を使っています、ループを10回繰り返すようにしてみました。
初期値の変数iが0から始まって、9までカウントアップされます。

変数iが「5」だったときにbreakを呼び出しています。
こうすると、変数iが「5」のときにループを抜けて、処理が終わります。

プログラムを実行してみると、下記のように出力されました。

0
1
2
3
4

変数iが「5」になったらループを抜けて、処理を終了したことが確認できました。

breakをラベルで使う

ラベルを指定して、breakを使うこともできます。
例えば、下記のように使います。

testBlock: {
  console.log('hello1')
  console.log('hello2')
  break testBlock
  console.log('hello3')
  console.log('hello4')
}

testBlockというラベルをつけて、処理を波括弧でくくりました。
その中でconsole.logを使って、文字列を出力しています。

「hello1」と「hello2」を出力した後に、breakを使っています。
「break testBlock」としているので、testBlockラベルの処理から抜けます。

そのため、実行結果は下記のようになりました。

hello1
hello2

文字列をふたつ出力した後に、処理を抜けたことが確認できました。

breakをwhileで使う

while文で繰り返し処理を行なっている箇所でも、breakを使うことができます。

let i = 0;
while (i < 10){
  if (i === 4) {
    break
  }
  console.log(`hello${i}`)
  i++
}

最初に変数iに0を代入しています。
その次にwhile文を使っています、変数iが9になるまでループするような条件にしました。

ループの中で変数iが4だったら、breakを使うようにしています。
そのため、このプログラムでは4回処理をして、処理を抜けるようになります。

判定の後にconsole.logでの値の出力と、変数iのカウントアップの処理をしています。
プログラムを実行すると、下記のように出力されます。

hello0
hello1
hello2
hello3

0〜3の4回出力されて、breakで抜けたことが確認できました。

breakはforEachで使える？

breakはforEachで使うことができません。
このように、forEachでbreakを使おうとするとエラーになります。

const fruits = ['apple', 'banana', 'lemon', 'orange']

fruits.forEach((fruit) => {
  if (fruit == 'lemon') {
    break
  }
})

出力されるエラーは下記です。SyntaxErrorが発生しました。
Uncaught SyntaxError: Illegal break statement

このときには、for...ofを使うことを検討してみてください。
下記のようにfor...ofでbreakを使ったときには、エラーは発生しません。

const fruits = ['apple', 'banana', 'lemon', 'orange']

for(fruit of fruits) {
  if (fruit === 'lemon') {
    break
  }
  console.log(fruit)
}

fruits配列を果物名を並べて作っています。
果物名がlemonだったときにbreakするので、出力されるのは下記のみです。

apple
banana

breakとcontinueの違いは？

breakとcontinueの違いについてです。
breakは処理を抜けて、後続の処理に移りますが、continueは処理ブロックの先頭に戻るだけです。

breakのサンプルコード

例えば、breakを使った下記の処理です。

const fruits = ['apple', 'orange', 'grape', 'banana', 'peach']

for (const fruit of fruits) {
  if (fruit === 'grape') {
    break
  }
  console.log(fruit)
}

fruits変数を5つの果物名で、配列として作成しました。

次にfor...ofを使ってループしています。
fruit変数に代入される文字列が「grape」だったときに、処理を抜けるようにbreakを書きました。

最初の2回は出力されて、3回目のループで処理を抜けます。
そのため、このプログラムの出力結果は下記になります。

apple
orange

continueのサンプルコード

続けて、同じ処理でbreakを使っていた箇所をcontinueに変えました。

const fruits = ['apple', 'orange', 'grape', 'banana', 'peach']

for (const fruit of fruits) {
  if (fruit === 'grape') {
    continue
  }
  console.log(fruit)
}

こうすると、処理を抜けることなく、ループの先頭に戻るだけです。
まず、最初に「apple」・「orange」と出力されます。

その後は「grape」なので、if文でtrueになります。
そして、continueで後続の処理をスキップし、ループの先頭に戻ります。

次の要素「banana」がfruit変数に代入され、同じようにループ処理が続きます。
結果、「grape」の時だけスキップされるので、出力は下記のようになります。

apple
orange
banana
peach

このようにbreakは処理を抜けますが、continueは後続処理をスキップして先頭に戻ります。

終わりに

今回はJavaScriptのbreakの使い方について書きました。

まとめると、下記のようになります。