All TutorialsCoursesEvents & Contests

Module

Break and Continue in JavaScript

If Else in JavaScript

For Loop in JavaScript

While Loop in JavaScript

Break and Continue in JavaScript

Modules

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:
break;


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>

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.
image8.png
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.

Frame 1038798.jpg

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>


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 With While Loop Javascript

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>

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.

image2.png
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:
continue;

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>

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.
image1.png
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.
Frame 1038799.jpg

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>

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
}

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.

image9.png
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>

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.
image7.png
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>

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.
image5.png

As expected the output doesn't contain the value for j when it is 2.

Check Out Programs Offered By Masai

If you are currently studying in 1st, 2nd or pre-final year of college,

Connect with a growingcommunity of learners

Masai School

Get StartedJoin the Program