Zenn
🔥

JavaScriptを一から理解する: break / continue

2022/02/09に公開
JavaScript
Web
break
continue
tech

はじめに

こんにちは、Doxperと申します。
今回はJavaScriptのbreak/continue命令を例をあげてご紹介します。

この記事でできるようになること

  • break/continue命令とは何か理解することができる。

対象読者

  • エンジニアを目指している同士
  • JavaScriptの基礎を身につけたい方
  • 過去にプログラミング学習に挫折した方
  • プログラミング言語は他に触ったことがない方

JavaScript break / continue Statement

break命令

前回、前々回の記事でfor,while命令を使った繰り返し処理についてご紹介しました。
上記の命令はあらかじめ指定した条件式が満たされたタイミングでループを終了しますが、break命令は特定の条件下において即座にループを終了させるために使用します。
早速構文をみてみましょう。

break構文
break [label];

//breakを使わない場合
for (let i = 0; i <= 10; i++) {
  console.log(i);
}
output
0
1
2
3
4
5
6
7
8
9
10

//breakを使った場合
for (let i = 0; i <= 10; i++) {
  console.log(i);
  //iが5になるとループを終了させる
  if (i === 5) {
    break;
  }
}
output
0
1
2
3
4
5

whileループの中でbreak命令を使用する

まずはbreakなしの例からみてみましょう。

let i = 0;

while (i < 5) {
  i++;
  console.log(i);
}
output
1
2
3
4
5

次にbreakありの場合をみてみましょう。

let i = 0;

while (i < 5) {
  i++;
  console.log(i);
  if (i === 2) {
    break;
  }
}
output
1
2

break命令は通常if,else,else...if,switchのような制御構文と一緒に使用されます。
制御構文について詳しく学びたい方は下記の記事をご参照ください。

https://zenn.dev/doxper/articles/489e4ea796b198
https://zenn.dev/doxper/articles/0ab4036c52a9e9

ネストされたループを脱出する

ネストされたループの中でbreak/continue命令を使用した場合最も内側のループを脱出、スキップします。
2つネストされたループの内側で使用されたケースをみてみましょう。

//breakなし

//一つ目のループ
for (let i = 1; i <= 5; i++) {
  //二つ目のループ
  for (let j = 1; j <= 5; j++) {
    console.log(i, j);
  }
}
output
1 1
1 2
1 3
1 4
1 5
2 1
2 2
2 3
2 4
2 5
3 1
3 2
3 3
3 4
3 5
4 1
4 2
4 3
4 4
4 5
5 1
5 2
5 3
5 4
5 5

//breakあり

//一つ目のループ
for (let i = 1; i <= 5; i++) {
  //二つ目のループ
  for (let j = 1; j <= 5; j++) {
    if (i + j === 4) break;
    console.log(i, j);
  }
}
output
1 1
1 2
2 1
4 1
4 2
4 3
4 4
4 5
5 1
5 2
5 3
5 4
5 5

continue命令

次にcontinue命令の使い方についてご説明します。
continue命令は指定した条件が発生した場合、現在のループをスキップして、次の反復処理を継続して実行します。

for (let i = 1; i <= 5; i++) {
  //iの値が2の時スキップ
  if (i === 2) {
    continue;
  }
  console.log("iの値は" + i);
}
output
iの値は1
iの値は3
iの値は4
iの値は5

whileループの中でcontinue命令を使う

whileループの中でcontinue命令を使った場合をみてみましょう。

let i = 0;

while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  console.log("iの値は" + i);
}
output
iの値は1
iの値は2
iの値は4
iの値は5

おわりに

いかがでしたでしょうか？
今回はJavaScriptのbreak/continue命令についてご紹介しました。
記事について間違っている点やよりよい表現などの提案などありましたらご気軽にコメントいただけますと幸いです。

それではまた次回の記事でお会いしましょう👋

参考文献

JavaScript break
JavaScript: Continue Statement
continue - JavaScript | MDN
JavaScript break Statement (with Examples)

Discussion