【JavaScript】複数にネストされたループの制御【break/continue】
この記事では、JavaScriptの「ループ処理」を簡潔に記述する「for文」や「while文」を制御するための「break」や「continue」などの使い方を解説します。
「break」や「continue」を使うことで、より複雑なループ処理を行うことが可能になります。
さらにこの記事の後半では、「ラベル」を使って、複数にネストされた「外側のループから抜ける方法」についても解説しています。
では本題へ入っていきます！
JavaScriptにおける「ループ処理」とは？
JavaScriptにおける「ループ処理」とは、「繰り返し同じ処理を実行するコード」のことを指します。
具体的には、下記のことを指します。
- for文
- while文
- do while文
他にもありますが、JavaScriptにおける基本的なループはこれらです。
breakを使うとどうなるのか？
break を使うことでループを止めることができます。
ループを抜けて、ループの下の行のコードから実行されます。
実際にbreakを使う
具体例を見せた方が分かりやすいと思うので、実際にbreakを使ってみます。
for文でbreakを使う
for (let i = 0; i < 10; i++) {
console.log( i );
if ( i == 4 ) {
break;
}
}
// 0 1 2 3 4このように、イテレーションのiが順番にコンソールに出力されていますが、「i==4」となる時に「break」を使いました。
すると、for文のループはそこで止まっています。
便利ですね。
while文でbreakを使う。
let i = 0;
while ( i < 10 ) {
console.log( i );
i++;
if ( i == 5 ) {
break;
}
}
// 0 1 2 3 4このように、「while文」でも「break」が使うことが可能です。
continueを使うとどうなるのか？
「continue」を使うと、「continue」が呼ばれたタイミングでそこから次のイテレーションに飛びます。
「break」でループ自体は止めたくない場合に使えますね。
実際にcontinueを使う
「continue」も実際に使っていきます！
for文で「continue」を使う
for (let i = 1; i < 11; i++) {
if ( i % 2 == 0 ) {
continue
}
console.log( i );
}
// 1 3 5 7 9この様に書くことで、iを2で割った余りが0の時は、「continue」で次のイテレーションにスキップしています。
つまり、1～10までの中の整数で奇数の数字だけが出力されています。
「continue」も上手く使えば、便利ですね。
while文で「continue」を使う。
let i = 0;
while ( i < 10 ) {
i++;
if ( i % 2 == 0 ) {
continue;
}
console.log( i );
}
// 1 3 5 7 9この様に上手く機能しています。
for文とwhile文での「continue」の挙動の違い
for文で「continue」が実行されると、その時点からイテレーションが1上がり、ループの1番上の行からまた命令文が実行されていきます。
while文もここは同じで「continue」が実行されたタイミングで「ループを続けるかどうか」が評価されて、ループの1番上に戻されます。
なので、「continue」よりも下に「イテレーション変数を上げる命令」が書かれている場合「無限ループ」となってしまいます。
let i = 0;
while ( i < 10 ) {
if ( i % 2 == 0 ) {
continue;
}
console.log( i );
i++;
}
// 無限ループこのように「i++」が「continue」よりも下にあるので、イテレーションに使っている変数が変更されないまま、「ループを続けるかどうか」が評価されるため、「無限ループ」となります。
細かいところですが、予期せぬバグがでないためにも、重要ですね。
ラベルを使って外側のループを制御する。
任意の名前: for (;;) {
for (;;) {
break (breakを適用したいループの名前);
}
}このようにforなどのループの前に「: (コロン)」を使って「任意の名前」をつけることができます。
そして「break」や「continue」を適用させたいループの名前と一緒に書くことで、そこにピンポイントで効かせることができます。
具体例でラベルの使い方を解説
これも実際に見た方が使い方が分かると思うので、具体例を挙げますね。
for文などのループ中にfor文などのループがあるような二重のループを考えます。
また、入れ子になって一段階コードが深くなることを「ネスト」と呼びます。
そのネストされたループの外側を内側から制御する方法について解説します。
「50から100までの素数をコンソールに出力する」ことを考えていきます。
for ( let i = 50; i < 100; i++ ) {
for ( let j = 2; j < i; j++ ) {
if ( i % j == 0 ) {
continue;
}
}
console.log( i );
}一見このようなプログラムで出力できそうですが、これだと50から100までの全ての数字が出力されてしまいます。
どうしたらいいのかという具体例
roop: for ( let i = 50; i < 100; i++ ) {
for ( let j = 2; j < i; j++ ) {
if ( i % j == 0 ) {
continue roop;
}
}
console.log( i );
}
// 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97このように書くことで、外側のループに対して「continue」を適用させられます。
結果もしっかり50から100までの間の素数を出力できています。
まとめ
この記事では、JavaScriptにおける「break」「continue」の使い方を解説しました。
「break」を使うことでループから抜けることが可能で、「continue」を使うことでループの次のイテレーションに飛ばすことが可能です。
また、ラベルを使うことで、ループに名前をつけて、ネストされたループの中から任意のループに対して、「break」や「continue」を使うことができます。
これからもプログラミングに関する記事や、僕の興味があることについて記事を書いてシェアしていくので、もしよかったら僕のTwitterのフォローもお願いします！
Twitterで記事の更新や、日々考えたことを呟いています！
ではでは！