For Loop Javascript Return Continue Break
Break and Continue in JavaScript
By Sudip Bhandari
Updated on : 14 Oct 2022
14 mins read
Published on : 14 Oct 2022
Introduction To Break and Continue
While learning about the for and while loop, we see a few examples of how the break and continue statements affect the normal flow of a loop. The break statement abruptly exits the loop, and the continue statement skips the current iteration.
Now we will learn about these two statements in detail.
Break Statement
The break statement ends the execution of a loop when used inside a loop. The syntax of a break statement in JavaScript is:
Let's see one example of a break statement with a for loop.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>break and continue in JavaScript</title> </head> <body> <h1>break with for Loop</h1> <script> for (let i = 1; i <= 5; i++) { if (i == 4) { break; } console.log(i); } </script> </body> </html>
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > break and continue in JavaScript </ title > </ head > < body > < h1 > break with for Loop </ h1 > < script > for ( let i = 1 ; i <= 5 ; i++) { if (i == 4 ) { break ; } console .log(i); } </ script > </ body > </ html >
In the above code, the for loop runs from 1 to 5. Inside the for loop, we have used an if statement that checks if the value of i is equal to 4. If the if-condition is true, the break statement is executed.
After running the code, your output will look something like this.
You can see that we are getting output from 1 to 3; however, the for loop should run from 1 to 5. This happens because the break statement is executed when the value of i is 4, which will immediately end the loop.
Let's understand the working of this example with the help of a flow chart.
Break With While Loop
We can also use the JavaScript break statement with the while loop. Let's see an example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>break and continue in JavaScript</title> </head> <body> <h1>break with while Loop</h1> <script> let i = 1; while (i <= 5) { if (i == 4) { break; } console.log(i); i++; } </script> </body> </html>
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > break and continue in JavaScript </ title > </ head > < body > < h1 > break with while Loop </ h1 > < script > let i = 1 ; while (i <= 5 ) { if (i == 4 ) { break ; } console .log(i); i++; } </ script > </ body > </ html >
Just like the previous example, we have used a break statement inside the while loop which will only be executed if the value of i is equal to 4.
After running the code, your output will look something like this.
Break Statement With Switch Case In JavaScript
The break Statement in JavaScript can also be used in a switch statement to break the execution of each case block.
If you don't know about the working of a switch statement, please visit our article on the switch statement in JavaScript.
Let's see one example of how the break statement is used with the switch statement.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>break and continue in JavaScript</title> </head> <body> <h1>break with switch Statement</h1> <script> let day = 3; switch (day) { // case 1 is executed if the value of day is 1 case 1: console.log("Sunday"); break; // case 2 is executed if the value of day is 2 case 2: console.log("Monday"); break; // case 3 is executed if the value of day is 3 case 3: console.log("Tuesday"); break; // case 4 is executed if the value of day is 4 case 4: console.log("Wednesday"); break; // case 5 is executed if the value of day is 5 case 5: console.log("Thursday"); break; // case 6 is executed if the value of day is 6 case 6: console.log("Friday"); break; // case 7 is executed if the value of day is 7 case 7: console.log("Saturday"); break; // default case is executed if the value of day is neither of the above cases default: console.log("Wrong Day"); } </script> </body> </html>
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > break and continue in JavaScript </ title > </ head > < body > < h1 > break with switch Statement </ h1 > < script > let day = 3 ; switch (day) { // case 1 is executed if the value of day is 1 case 1 : console .log( "Sunday" ); break ; // case 2 is executed if the value of day is 2 case 2 : console .log( "Monday" ); break ; // case 3 is executed if the value of day is 3 case 3 : console .log( "Tuesday" ); break ; // case 4 is executed if the value of day is 4 case 4 : console .log( "Wednesday" ); break ; // case 5 is executed if the value of day is 5 case 5 : console .log( "Thursday" ); break ; // case 6 is executed if the value of day is 6 case 6 : console .log( "Friday" ); break ; // case 7 is executed if the value of day is 7 case 7 : console .log( "Saturday" ); break ; // default case is executed if the value of day is neither of the above cases default : console .log( "Wrong Day" ); } </ script > </ body > </ html >
In the above code, the switch statement is used to print the day of a week based on the value present in the day variable. Here, each case is assigned with a number from 1 to 7 and prints the corresponding name of the day. For example,
-
case 1 prints "Sunday"
-
case 2 prints "Monday"
-
case 3 prints "Tuesday"
-
and so on.
Also, notice the use of the break statements after each case. This is important because whenever any case is executed, the break statement will exit the switch case statement so that the following cases after the correct cases are not executed.
After running the code, your output will look something like this.
In our code, the value of the day variable is 3, which matches with case 3. Hence, the value "Tuesday" is printed.
Also, due to the use of the break statement, the switch case statement ends, and the cases after case 3 are not executed.
Continue Statement In Javascript
The continue statement, when used inside a loop, will skip the current iteration of the loop and start the loop from the next iteration. The syntax of continue in JavaScript is:
Let's see one example of the continue statement with the for Loop in Javascript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>break and continue in JavaScript</title> </head> <body> <h1>continue with for Loop</h1> <script> for (let i = 1; i <= 5; i++) { if (i < 3) { continue; } console.log(i); } </script> </body> </html>
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > break and continue in JavaScript </ title > </ head > < body > < h1 > continue with for Loop </ h1 > < script > for ( let i = 1 ; i <= 5 ; i++) { if (i < 3 ) { continue ; } console .log(i); } </ script > </ body > </ html >
In the above code, the continue statement is used inside the if block with condition i < 3. This means the continue statement is only executed if the value of i is less than 3.
After running the code, your output will look something like this.
As you can see, only the values from 3 to 5 are printed. This happens because, during the first and second iterations, the value of i will be 1 and 2, respectively. At this point, the test condition i < 3 becomes true, so the continue statement is executed, which will skip both the first and second iterations. Hence, the print statement after the if block is not executed for the first two iterations.
However, during the 3rd iteration, the value of i becomes 3, and the test condition i < 3 will be false. Hence, the continue statement is not executed, and values after 3 are printed.
Let's try to understand this with the help of a flow chart.
Continue With While Loop
We can also use the JavaScript continue statement with the while loop in JavaScript. Let's see an example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>break and continue in JavaScript</title> </head> <body> <h1>continue with while Loop</h1> <script> let i = 0; while (i <= 5) { i++; if (i < 3) { continue; } console.log(i); } </script> </body> </html>
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > break and continue in JavaScript </ title > </ head > < body > < h1 > continue with while Loop </ h1 > < script > let i = 0 ; while (i <= 5 ) { i++; if (i < 3 ) { continue ; } console .log(i); } </ script > </ body > </ html >
In the above code, the continue statement is used inside the while loop and it will be executed if the value of i is less than 3.
You can see that we have used the update statement before the if block inside the loop. It's because if we keep that after the condition like this.
while (i <=5 3) { if ( i < 3) { continue; } console.log(i); i++; // this is always skipped if the continue statement executed }
while (i <= 5 3 ) { if ( i < 3 ) { continue ; } console.log(i); i++; // this is always skipped if the continue statement executed }
The update statement will be skipped by the continue statement when the condition is true. Hence, the value of i will never be updated, and the continue statement will be executed repeatedly.
After running the code, your output will look something like this.
The output shows that the first two values, 1 and 2, are not printed. This happens because, during the first and second iterations, the value of i will be 1 and 2, so the condition i < 3 becomes true. Hence, the continue statement is executed, which will skip the print statement for the loop's first and second iterations.
Label Break And Continue In JavaScript
So far, we have been using just break and continue keywords with loops, and they are used to either exit or skip the loop iterations.
However, JavaScript has a concept named label that is generally used with break and continue statements.
-
label break - allows us to break out of any code block, not only loops.
-
label continue - allows us to skip the loop's current iteration in the case of nested loops.
Example: label break
Let's see an example of a labeled break to exit a code block.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>break and continue in JavaScript</title> </head> <body> <h1>Label break</h1> <script> // code block test: { console.log("First Statement"); console.log("Second Statement"); break test; console.log("Third Statement"); console.log("Fourth Statement") } console.log("Exit the code block"); </script> </body> </html>
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > break and continue in JavaScript </ title > </ head > < body > < h1 > Label break </ h1 > < script > // code block test : { console .log( "First Statement" ); console .log( "Second Statement" ); break test; console .log( "Third Statement" ); console .log( "Fourth Statement" ) } console .log( "Exit the code block" ); </ script > </ body > </ html >
In the above code, the label code block named test: is used that prints:
-
First Statement
-
Second Statement
-
Third Statement
-
Fourth Statement
In between those print statements, we have used the label break statement, break test.
After running the code, your output will look something like this.
Here, you can see the label break exit the code block; that's why only the first two print statements are executed.
Example: label continue
Let's see one example of a label continue statement with nested loops. In a nested loop, there is one loop inside another.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>break and continue in JavaScript</title> </head> <body> <h1>Label continue</h1> <script> outerLoop: for (let i = 1; i <= 2; i++) { innerLoop: for (let j = 1; j <= 3; j++) { if (j == 2) { continue innerLoop; } console.log(i, j); } } </script> </body> </html>
<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > break and continue in JavaScript </ title > </ head > < body > < h1 > Label continue </ h1 > < script > outerLoop : for ( let i = 1 ; i <= 2 ; i++) { innerLoop : for ( let j = 1 ; j <= 3 ; j++) { if (j == 2 ) { continue innerLoop; } console .log(i, j); } } </ script > </ body > </ html >
In the above code, we have two label loops named outerLoop and innerLoop. The innerLoop is nested inside the outer loop and includes an if statement with condition j == 2.
Inside the if statement, we are using the label continue statement, continue innerLoop; that will skip the current iteration of the inner for loop when the value of i is 2. Hence, the print statement will not be executed if the value of j is 2.
After running the code, your output will look something like this.
As expected the output doesn't contain the value for j when it is 2.
Check Out Programs Offered By Masai
Source: https://masaischool.com/learn/tutorials/javascript-tutorial/break-and-continue-in-javascript
0 Response to "For Loop Javascript Return Continue Break"
Post a Comment