JavaScript Break and Continue: Control Flow in Loops with Labels

Learn how to use JavaScript’s break and continue statements to control the flow of loops. Explore their usage, benefits, and practical examples with labels

In JavaScript, break and continue are control flow statements used within loops (such as for, while, and do…while) to control the execution of the loop and the flow of your program. They serve different purposes:

Table of Contents

break Statement:

The break statement is used to exit the current loop prematurely when a certain condition is met.

When break is encountered inside a loop, the loop immediately terminates, and the program continues with the next statement after the loop.

It’s often used to exit a loop early when a specific condition is satisfied.

Example:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    
    <script>
      for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break; // This will exit the loop when i is 3
  }
  Document.write(i+"<br>");
}

    </script>
</body>
</html>

Output:

continue Statement:

The continue statement is used to skip the current iteration of a loop and continue with the next iteration.

When continue is encountered inside a loop, the current iteration is immediately terminated, and the loop moves on to the next iteration.

It’s typically used when you want to skip certain iterations based on a condition without exiting the loop entirely.

Example:

<!DOCTYPE html>

<html>

<head>

    <title>Form Validation</title>

</head>

<body>

    <script>

       for (let i = 0; i < 5; i++) {

  if (i === 2) {

    continue; // This will skip the iteration when i is 2

  }

 document.write(i+"<br>");

}

    </script>

</body>

</html>

Output:

Both break and continue can be used with various loop types (e.g., for, while, and do…while) and can be useful for controlling the flow of your code within loops based on specific conditions.

complete code example in html

Here’s a complete HTML example that demonstrates the use of the break and continue statements within JavaScript loops. This example uses both for and while loops:

<!DOCTYPE html>
<html>
<head>
    <title>Break and Continue Example</title>
</head>
<body>
    <h1>Break and Continue Example</h1>

    <h2>Using "break" in a for loop:</h2>
    <script>
        for (let i = 0; i < 5; i++) {
            if (i === 3) {
                break; // This will exit the loop when i is 3
            }
            document.write(i + "<br>");
        }
    </script>

    <h2>Using "continue" in a while loop:</h2>
    <script>
        let j = 0;
        while (j < 5) {
            if (j === 2) {
                j++; // Increment j to avoid an infinite loop
                continue; // This will skip the iteration when j is 2
            }
            document.write(j + "<br>");
            j++;
        }
    </script>
</body>
</html>

In this HTML document:

we have two sections, each with its own JavaScript code.
The first section demonstrates the use of the break statement in a for loop, and the second section demonstrates the use of the continue statement in a while loop.
The document.write method is used to display the output on the webpage.

Another example

Here’s another complete HTML example that uses break and continue in JavaScript loops. In this example, we’ll use a while loop for finding even and odd numbers within a range:

<!DOCTYPE html>
<html>
<head>
    <title>Break and Continue Example</title>
</head>
<body>
    <h1>Break and Continue Example</h1>

    <h2>Finding Even and Odd Numbers:</h2>
    <p>Numbers from 1 to 10:</p>
    <ul id="result"></ul>
    <script>
        // Using a while loop to find even and odd numbers
        let number = 1;
        const resultElement = document.getElementById("result");
        while (number <= 10) {
            if (number % 2 === 0) {
                // Even number, skip to the next iteration
                number++;
                continue;
            }
            // Odd number, add it to the result list
            const listItem = document.createElement("li");
            listItem.textContent = `Number ${number} is odd.`;
            resultElement.appendChild(listItem);
            number++;
        }
    </script>
</body>
</html>

In this example:

we use a while loop to iterate through numbers from 1 to 10.
Within the loop, we check whether each number is even or odd.
If it’s even, we use continue to skip to the next iteration, and if it’s odd, we add it to an HTML list.
The results are displayed on the webpage.

JavaScript Labels

In JavaScript, labels are identifiers that you can use to mark a specific location within your code, typically within loops or control structures. Labels are not commonly used in JavaScript and are considered a less common feature, but they can be useful in certain situations for controlling the flow of your code. Labels are often used in conjunction with the break and continue statements to specify which loop or block of code you want to affect.

Here’s the basic syntax for creating a label:

labelName: statement

labelName is any valid JavaScript identifier followed by a colon.

statement is the JavaScript statement that you want to label.

Here’s an example of how labels can be used with loops and the break statement:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    
    <script>
      outerLoop: for (let i = 0; i < 3; i++) {
    innerLoop: for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerLoop; // This breaks out of the outer loop
        }
        console.log(`i=${i}, j=${j}`);
    }
}

    </script>
</body>
</html>

In this example:

We have an outer loop labeled as outerLoop and an inner loop labeled as innerLoop.
When i is 1 and j is 1, the break outerLoop statement is executed, causing the outer loop to terminate.

Output:

i=0, j=0

i=0, j=1

i=0, j=2

As you can see, the break statement with the outer Loop label allows you to break out of the outer loop, even though the break statement is inside the inner loop.

It’s worth noting that while labels can provide a way to control the flow of your code in more complex situations, they are not commonly used in everyday JavaScript programming.

Most developers rely on simpler control flow constructs like if statements, for loops, and while loops to achieve their goals. Labels can make your code more complex and harder to read, so it’s essential to use them judiciously when there’s a specific need for them.

complete code example

Here’s a complete HTML example that demonstrates the use of labels in JavaScript. In this example, we’ll use labels with a nested loop and the break statement to break out of the outer loop:

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Labels Example</title>
</head>
<body>
    <h1>JavaScript Labels Example</h1>
    <script>
        outerLoop: for (let i = 1; i <= 3; i++) {
            innerLoop: for (let j = 1; j <= 3; j++) {
                if (i === 2 && j === 2) {
                    break outerLoop; // This breaks out of the outer loop
                }
                console.log(`i=${i}, j=${j}`);
            }
        }
    </script>
</body>
</html>

In this code:

We have an outer loop labeled as outerLoop and an inner loop labeled as innerLoop.
The break outerLoop statement is used when i is equal to 2 and j is equal to 2, causing the outer loop to terminate.

When you run this code, you’ll see the following output:

i=1, j=1

i=1, j=2

i=1, j=3

As you can see, the program prints the values of i and j for each iteration of the inner loop until the condition for breaking the outer loop is met.

Remember that labels are not commonly used in JavaScript, and simpler control flow constructs are usually sufficient for most programming tasks. Labels should be used sparingly and only when you have a specific need for them.

Importance and uses of JavaScript Break and Continue

The break and continue statements in JavaScript are essential control flow constructs that play a crucial role in loops, allowing you to control the flow of your code within iterations. Here are their importance and common uses:

JavaScript break Statement:

Terminating Loops:

The primary use of break is to exit a loop prematurely when a specific condition is met. \This can be valuable when you need to stop a loop as soon as a certain condition is satisfied.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // Exit the loop when i is 5
  }
  console.log(i);
}

Switch Statement:

In addition to loops, break is often used within a switch statement to exit the switch block when a particular case is matched. This helps prevent fall-through behavior.

switch (day) {
  case "Monday":
    console.log("It's Monday");
    break;
  case "Tuesday":
    console.log("It's Tuesday");
    break;
  // ...
}

JavaScript continue Statement:

Skipping Iterations:

The continue statement allows you to skip the current iteration of a loop and proceed to the next one. It’s helpful when you want to avoid executing certain code for specific iterations.

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // Skip iteration when i is 2
  }
  console.log(i);
}

Avoiding Nesting:

continue can be used to avoid deeply nested code by skipping some iterations based on conditions, which can lead to more readable and maintainable code.

for (let i = 0; i < rows; i++) {
  if (isRowHidden(i)) {
    continue; // Skip hidden rows
  }
  // Process and display non-hidden rows
}

Enhancing Performance:

In some cases, continue can improve code efficiency by skipping unnecessary calculations or operations during specific iterations.

Both break and continue are valuable tools for controlling the flow of your JavaScript code, especially within loops. They help you write more efficient and expressive code by allowing you to exit loops early or skip specific iterations based on conditions. However, it’s important to use them judiciously to maintain code readability and avoid overly complex logic.

Terminating Loops: complete code in html

Here’s a complete HTML example that demonstrates the use of the break statement to terminate a loop when a specific condition is met:

<!DOCTYPE html>
<html>
<head>
    <title>Terminating a Loop with JavaScript</title>
</head>
<body>
    <h1>Terminating a Loop with JavaScript</h1>
    <script>
        document.write("<p>Looping and terminating when i is 5:</p>");
        for (let i = 0; i < 10; i++) {
            if (i === 5) {
                break; // Exit the loop when i is 5
            }
            document.write(`i = ${i}<br>`);
        }
    </script>
</body>
</html>

In this HTML code:

We have a simple loop that counts from 0 to 9 using the for loop.
Within the loop, there’s an if statement that checks if i is equal to 5.
If i is indeed equal to 5, the break statement is executed, causing the loop to terminate prematurely.

When you run this HTML page in a web browser, it will display the numbers from 0 to 4 and then terminate the loop when i reaches 5. The output will look like this:

Looping and terminating when i is 5:

i = 0

i = 1

i = 2

i = 3

i = 4

This example demonstrates how the break statement can be used to terminate a loop as soon as a specific condition is satisfied.

Switch Statement: complete code

Here’s a complete HTML example that demonstrates the use of the break statement within a switch statement to exit the switch block when a particular case is matched:

<!DOCTYPE html>
<html>
<head>
    <title>Switch Statement with JavaScript</title>
</head>
<body>
    <h1>Switch Statement with JavaScript</h1>
    <script>
        const day = "Tuesday";
        switch (day) {
            case "Monday":
                document.write("It's Monday.");
                break;
            case "Tuesday":
                document.write("It's Tuesday.");
                break;
            case "Wednesday":
                document.write("It's Wednesday.");
                break;
            case "Thursday":
                document.write("It's Thursday.");
                break;
            case "Friday":
                document.write("It's Friday.");
                break;
            default:
                document.write("It's the weekend.");
        }
    </script>
</body>
</html>

In this HTML code:

We have a switch statement that evaluates the value of the day variable.
Inside the switch block, there are multiple case statements, each corresponding to a specific day of the week.
When a case matches the value of the day variable (in this case, “Tuesday”), it executes the code within that case.
The break statement is used to exit the switch block once a match is found, preventing fall-through behavior.

When you run this HTML page in a web browser, it will determine that it’s Tuesday and display “It’s Tuesday.” If you change the value of the day variable to another day of the week and reload the page, it will display the corresponding message.

The switch statement is commonly used to compare a single value against multiple possible values and execute different code blocks based on the matching value. The break statement is essential within a switch statement to prevent execution of subsequent case statements once a match is found.

Avoiding Nesting: complete code

Here’s a complete HTML example that demonstrates the use of the continue statement to avoid nesting and skip specific iterations of a loop:

<!DOCTYPE html>
<html>
<head>
    <title>Avoiding Nesting with JavaScript</title>
</head>
<body>
    <h1>Avoiding Nesting with JavaScript</h1>

    <script>
        const rows = 5;

        // Function to check if a row should be hidden
        function isRowHidden(row) {
            // Let's say we want to hide rows with even row numbers
            return row % 2 === 0;
        }

        document.write("<p>Processing and displaying non-hidden rows:</p>");
        for (let i = 0; i < rows; i++) {
            if (isRowHidden(i)) {
                continue; // Skip hidden rows
            }
            document.write(`Processing and displaying row ${i}<br>`);
        }
    </script>
</body>
</html>

In this HTML code:

We have a loop that iterates through a specified number of rows (rows).
Inside the loop, we call the isRowHidden function, which checks whether a row should be hidden based on a condition (in this example, we hide even rows).
If the condition is met and the row should be hidden, the continue statement is used to skip the processing and display for that row.
If the row is not hidden, we continue with processing and displaying it.

When you run this HTML page in a web browser, it will process and display only the non-hidden rows (in this case, rows with odd row numbers). This demonstrates how the continue statement can help you avoid nesting and simplify your code by skipping specific iterations of a loop based on conditions.

Try to modify the isRowHidden function and the condition to fit your specific use case.

Skipping Iterations: complete code

Here’s a complete HTML example that demonstrates the use of the continue statement to skip specific iterations of a loop:

<!DOCTYPE html>
<html>
<head>
    <title>Skip Iterations with JavaScript</title>
</head>
<body>
    <h1>Skip Iterations with JavaScript</h1>
    <script>
        document.write("<p>Skip iteration when i is 2:</p>");
        for (let i = 0; i < 5; i++) {
            if (i === 2) {
                continue; // Skip iteration when i is 2
            }
            document.write(`i = ${i}<br>`);
        }
    </script>
</body>
</html>

In this HTML code:

We have a for loop that iterates from 0 to 4.
Inside the loop, there’s an if statement that checks if the value of i is equal to 2.
If i is equal to 2, the continue statement is executed, which skips the current iteration of the loop and proceeds to the next iteration.
For all other values of i, the loop continues executing, and the value of i is displayed.

When you run this HTML page in a web browser, it will display the numbers from 0 to 4, excluding 2, because the continue statement is used to skip the iteration when i is equal to 2. The output will look like this:

Skip iteration when i is 2:

i = 0

i = 1

i = 3

i = 4

This example demonstrates how the continue statement can be used to skip specific iterations of a loop based on a condition, allowing you to control the flow of your code within the loop.

Enhancing Performance: complete code

The continue statement is often used to enhance performance by skipping unnecessary calculations or operations during specific iterations of a loop. However, demonstrating performance improvements typically requires more complex and specific use cases, and the benefits may not be visually apparent in a simple HTML example. Nevertheless, here’s a basic example that showcases the concept:

<!DOCTYPE html>
<html>
<head>
    <title>Enhancing Performance with JavaScript</title>
</head>
<body>
    <h1>Enhancing Performance with JavaScript</h1>

    <script>
        const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        document.write("<p>Square of odd numbers:</p>");

        for (let i = 0; i < numbers.length; i++) {
            if (numbers[i] % 2 === 0) {
                continue; // Skip even numbers to enhance performance
            }
            const square = numbers[i] * numbers[i];
            document.write(`Square of ${numbers[i]} is ${square}<br>`);
        }
    </script>
</body>
</html>

In this HTML code:

We have an array numbers containing integers from 1 to 10.
We use a for loop to iterate through the array elements.
Inside the loop, we check if the current number is even using the condition numbers[i] % 2 === 0.
If the number is even, we use continue to skip further calculations (in this case, squaring the number).

When you run this HTML page in a web browser, it will calculate and display the squares of the odd numbers from the array. The continue statement helps enhance performance by avoiding unnecessary calculations for even numbers, although the performance gain may not be visually evident in this simple example.

In more complex scenarios where calculations or operations are resource-intensive, the continue statement can significantly improve the efficiency of your code by skipping unnecessary work during specific iterations.

Application by this lesson

The concepts of using break, continue, and labels in JavaScript loops are fundamental and can be applied to various scenarios in web development and programming. Here are a few practical applications of these concepts:

Form Validation:

When validating input in web forms, you can use the break statement to exit the validation loop once an error is found, preventing unnecessary checks.

Data Filtering and Processing:

In data processing tasks, you can use continue to skip rows or items that don’t meet certain criteria, improving efficiency.

Game Development:

Game loops often involve complex logic for handling different game states and events. break and continue can be used to control game flow within loops.

Interfaces:

In interfaces, you can use break and continue to handle different interaction scenarios, such as skipping certain steps in a multi-step process or breaking out of a loop when the takes a specific action.

Algorithm Implementation:

Algorithms often require precise control flow. Labels can be used to create structured, non-nested loops and control flow within complex algorithms.

Here’s a simplified example of form validation using break:

<!DOCTYPE html>
<html>
<head>
    <title>Form Validation</title>
</head>
<body>
    <h1>Form Validation</h1>

    <form id="myForm" onsubmit="return validateForm()">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>

        <input type="submit" value="Submit">
    </form>

    <script>
        function validateForm() {
            const form = document.getElementById("myForm");
            const inputs = form.getElementsByTagName("input");

            for (let i = 0; i < inputs.length; i++) {
                if (!inputs[i].checkValidity()) {
                    alert("Please fill in all fields.");
                    return false; // Exit form submission on validation error
                }
            }

            alert("Form submitted successfully!");
            return true;
        }
    </script>
</body>
</html>

In this example:

We have a simple HTML form with name and email fields.
The validateForm JavaScript function is called when the form is submitted.
Inside the function, a for loop checks the validity of each input field.
If an input is invalid (e.g., empty), the break statement is used to exit the loop and prevent form submission.
If all inputs are valid, the form is submitted successfully.
This demonstrates how the break statement can be applied to real-world scenarios, such as form validation, to enhance experience and provide error feedback.

Quiz with answers about this lesson

Here’s a multiple-choice quiz about the concepts of break and continue in JavaScript loops:

What is the purpose of the break statement in JavaScript?
A) To skip the current iteration of a loop.
B) To skip a specified number of iterations.
C) To exit the loop prematurely when a certain condition is met.
D) To restart the loop from the beginning.

Answer: C) To exit the loop prematurely when a certain condition is met.

What is the primary use of the continue statement in JavaScript?
A) To exit the loop completely.
B) To pause the loop for a specified duration.
C) To skip the current iteration of a loop and continue with the next iteration.
D) To reverse the direction of the loop.

Answer: C) To skip the current iteration of a loop and continue with the next iteration.

What is the purpose of labels in JavaScript?
A) To mark comments within your code.
B) To define variables.
C) To specify which loop or block of code a break or continue statement should affect.
D) To create hyperlinks in web pages.

Answer: C) To specify which loop or block of code a break or continue statement should affect.

When is the break statement commonly used in JavaScript?
A) To loop through an array of data.
B) To create nested loops.
C) To exit a loop prematurely when a specific condition is satisfied.
D) To print values to the console.

Answer: C) To exit a loop prematurely when a specific condition is satisfied.

In a switch statement, why is the break statement used?
A) To indicate a case statement.
B) To continue to the next case statement.
C) To exit the switch block once a matching case is found.
D) To restart the switch block.

Answer: C) To exit the switch block once a matching case is found.

In which situation is the continue statement particularly useful for enhancing performance?
A) When processing even numbers in a loop.
B) When nested loops are needed.
C) When skipping iterations based on specific conditions can save computation time.
D) When reversing the direction of a loop.

Answer: C) When skipping iterations based on specific conditions can save computation time.

What happens when the break statement is encountered inside a loop in JavaScript?
A) It skips the current iteration and continues with the next iteration.
B) It restarts the loop from the beginning.
C) It exits the loop prematurely.
D) It does nothing; break is not a valid statement in JavaScript.

Answer: C) It exits the loop prematurely.

Which control flow statement is used to skip the current iteration of a loop in JavaScript?
A) exit
B) skip
C) next
D) continue

Answer: D) continue

When might you use labels in JavaScript?
A) To declare variables.
B) To mark comments in your code.
C) To specify where a function should return.
D) To control the flow of break and continue statements within nested loops or blocks.

Answer: D) To control the flow of break and continue statements within nested loops or blocks.

In which loop types can the break and continue statements be used?
A) Only in for loops.
B) Only in while loops.
C) In for, while, and do…while loops.
D) Neither for nor while loops.

Answer: C) In for, while, and do…while loops.

What is the primary purpose of the continue statement in JavaScript?
A) To exit the loop prematurely.
B) To restart the loop from the beginning.
C) To skip the current iteration of a loop and proceed to the next iteration.
D) To reverse the direction of the loop.

Answer: C) To skip the current iteration of a loop and proceed to the next iteration.

Which of the following statements is true about labels in JavaScript?
A) Labels are used to mark HTML elements.
B) Labels are required for declaring variables.
C) Labels are primarily used to create hyperlinks in web pages.
D) Labels are used to specify which loop or block of code a break or continue statement should affect.

Answer: D) Labels are used to specify which loop or block of code a break or continue statement should affect.

References of this lesson

JavaScript Tutorials and Courses:

JavaScript Books:

Example: “Eloquent JavaScript” by Marijn Haverbeke.

Online Coding Platforms:

JavaScript Tutorial

Curriculum

JavaScript Break and Continue: Control Flow in Loops with Labels

break Statement:

continue Statement:

complete code example in html

JavaScript Labels

complete code example

Importance and uses of JavaScript Break and Continue

JavaScript break Statement:

Switch Statement:

JavaScript continue Statement:

Enhancing Performance:

Switch Statement: complete code

Avoiding Nesting: complete code

Skipping Iterations: complete code

Enhancing Performance: complete code

Application by this lesson

Quiz with answers about this lesson

References of this lesson

Leave a Reply

Modal title