12.4 Break and Continue Statements

Break and Continue Statements (15 mins)

  1. Introduction to Break and Continue Statements:

    • Break Statement:

      • The break statement is used to exit a loop early, stopping the loop's execution entirely once the condition is met.

      • It can be used in any type of loop (for, while, do-while) and in switch statements.

      • Example: Exiting a loop when a specific condition is met:

        for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;  // Exit the loop when i is 5
  }
  console.log(i);  // Outputs: 1, 2, 3, 4
}

    • Continue Statement:

      • The continue statement skips the current iteration of the loop and moves to the next one.

      • Unlike break, it doesn’t terminate the loop entirely, just skips over the code for the current iteration.

      • Example: Skipping over certain values in a loop:

        for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;  // Skip the current iteration when i is 3
  }
  console.log(i);  // Outputs: 1, 2, 4, 5 (skips 3)
}

  2. Difference Between Break and Continue:

    • Break: Exits the loop completely when a specific condition is met.

    • Continue: Skips the rest of the current iteration and proceeds with the next iteration of the loop.

  3. When to Use Break and Continue:

    • Break: When you want to stop executing a loop prematurely (e.g., when searching for a value and stopping once it's found).

    • Continue: When you want to skip certain iterations of the loop (e.g., when filtering out specific values from a list).

Student Activity (15 mins):

Objective: Students will write JavaScript loops that demonstrate the use of break and continue statements to control the flow of a loop.

Instructions:

  1. Create an HTML file (e.g., break_continue.html) and write a script to demonstrate the use of break and continue in loops.

    Example Code:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Break and Continue Example</title>
</head>
<body>
  <h1>Check the Console for Loop Output</h1>
  
  <script>
    // Break Example: Exiting the loop early
    console.log("Break Example:");
    for (let i = 1; i <= 10; i++) {
      if (i === 6) {
        break;  // Exit the loop when i equals 6
      }
      console.log(i);  // Outputs: 1, 2, 3, 4, 5
    }

    // Continue Example: Skipping certain iterations
    console.log("Continue Example:");
    for (let i = 1; i <= 5; i++) {
      if (i === 3) {
        continue;  // Skip the current iteration when i equals 3
      }
      console.log(i);  // Outputs: 1, 2, 4, 5
    }

    // Combination Example: Using both break and continue
    console.log("Combination Example:");
    for (let i = 1; i <= 10; i++) {
      if (i === 3) {
        continue;  // Skip 3
      }
      if (i === 8) {
        break;  // Stop the loop at 8
      }
      console.log(i);  // Outputs: 1, 2, 4, 5, 6, 7
    }
  </script>
</body>
</html>

  2. Run the file in a browser:

    • Open the HTML file in a browser and use Developer Tools (F12 or right-click and select Inspect > Console) to view the output of the loop operations.

  3. Activity:

    • Step 1: Run the provided code and observe how the break and continue statements affect the loops.

    • Step 2: Modify the loops:

      • Change the values where the break and continue conditions occur.

      • Try using break and continue with different types of loops (e.g., while loop).

    Challenge:

    • Write a script that loops through numbers 1 to 10:

      • Skip even numbers using the continue statement.

      • Stop the loop once the number reaches 9 using the break statement.

    Example Code for Challenge:

    for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;  // Skip even numbers
  }
  if (i === 9) {
    break;  // Stop the loop at 9
  }
  console.log(i);  // Outputs: 1, 3, 5, 7
}

Follow-up Questions:

  1. How does the break statement affect loop execution? What happens when the condition is met?

  2. How does the continue statement work differently from break?

  3. In what types of problems would you use break vs. continue to control loop flow?

Expected Outcome:

Students will understand how to use the break and continue statements to control the flow of loops in JavaScript. They will be able to differentiate between skipping iterations and stopping loops, and apply these concepts to solve problems efficiently.

Previous12.3 Ternary Operator and Switch StatementsNext12.5 Programming Activity

Last updated