Labeled break and continue in Javascript - Step-by-Step Execution

Concept Flow - Labeled break and continue

Start Outer Loop

↓

Start Inner Loop

↓

Check Condition

↓

Action

↓

Continue Inner or Outer Loop

↓

End Inner Loop

↓

End Outer Loop

The labeled break or continue lets you jump out of or skip iterations in outer loops directly from inner loops.

Execution Sample

Javascript

outer: for(let i=1; i<=3; i++) {
  for(let j=1; j<=3; j++) {
    if(i===2 && j===2) break outer;
    console.log(i, j);
  }
}

This code prints pairs (i,j) but stops all loops when i=2 and j=2 using labeled break.

Execution Table

Step	i	j	Condition (i===2 && j===2)	Action	Output
1	1	1	false	Print (1,1)	(1,1)
2	1	2	false	Print (1,2)	(1,2)
3	1	3	false	Print (1,3)	(1,3)
4	2	1	false	Print (2,1)	(2,1)
5	2	2	true	Break outer loop

💡 At step 5, condition is true, so labeled break exits the outer loop entirely.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
i	1	1	1	1	2	2	2
j	1	1	2	3	1

Key Moments - 2 Insights

Why does the loop stop completely at step 5 instead of just breaking the inner loop?

Because the break is labeled 'outer', it breaks the outer loop, not just the inner one, as shown in execution_table row 5.

What happens if we use 'continue outer' instead of 'break outer' at step 5?

The continue would skip the current iteration of the outer loop and start the next iteration, not exit all loops.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of j at step 3?

A 2

B 3

C 1

D undefined

💡 Hint

Check the 'j' column in the execution_table row for step 3.

At which step does the labeled break cause the loops to stop?

A Step 3

B Step 4

C Step 5

D Step 2

💡 Hint

Look at the 'Action' column in execution_table to find when 'Break outer loop' happens.

If the condition was never true, how many times would the inner loop run for i=1?

A 3

B 1

C 2

D 0

💡 Hint

Check the 'j' values for i=1 in the execution_table rows 1-3.

Concept Snapshot

Labeled break and continue let you control outer loops from inner loops.
Syntax: labelName: for(...) { ... break labelName; ... continue labelName; }
'break labelName' exits the labeled loop.
'continue labelName' skips to next iteration of labeled loop.
Use to avoid complex flags or nested conditions.

Full Transcript

This example shows how labeled break works in JavaScript. We have two loops: outer and inner. The label 'outer' is placed before the outer loop. Inside the inner loop, we check if i equals 2 and j equals 2. If true, we break the outer loop using 'break outer;'. The execution table traces each step: printing pairs (i,j) until the condition is met. At step 5, the condition is true, so the labeled break exits both loops immediately. The variable tracker shows how i and j change each step. Key moments clarify why the labeled break stops all loops, not just the inner one. The visual quiz tests understanding of variable values and loop control. The concept snapshot summarizes how labeled break and continue work to control loops more flexibly.

Practice

1.

What does the break label; statement do in JavaScript?

easy

A. It exits the loop identified by the label immediately.

B. It skips the current iteration of the inner loop only.

C. It restarts the entire program from the beginning.

D. It pauses the loop until a condition is met.

Solution

1. Step 1: Understand labeled break

   The break label; statement exits the loop that has the specified label, not just the innermost loop.

2. Step 2: Compare with normal break

   Normal break exits only the current loop, but labeled break exits the labeled outer loop immediately.

3. Final Answer:

   It exits the loop identified by the label immediately. -> Option A

4. Quick Check:

   break label exits labeled loop [OK]

Hint: Labeled break exits the named loop, not just inner loop [OK]

Common Mistakes:

• Thinking break label only skips current iteration
• Confusing break label with continue label
• Assuming break label pauses the loop

2.

Which of the following is the correct syntax to continue the outer loop labeled outerLoop?

outerLoop: for(let i = 0; i < 3; i++) {
  for(let j = 0; j < 3; j++) {
    // What goes here?
  }
}

easy

A. continue outerLoop;

B. continue (outerLoop);

C. continue: outerLoop;

D. continue to outerLoop;

Solution

1. Step 1: Recall labeled continue syntax

   The correct syntax to continue a labeled loop is continue labelName; without parentheses or extra words.

2. Step 2: Match options with syntax

   continue outerLoop; matches the correct syntax exactly. Options B, C, and D are invalid syntax.

3. Final Answer:

   continue outerLoop; -> Option A

4. Quick Check:

   continue labelName; is correct syntax [OK]

Hint: Use 'continue label;' exactly, no parentheses or colons [OK]

Common Mistakes:

• Adding parentheses around label
• Using colon after continue
• Writing extra words like 'to'

3.

What is the output of the following code?

outer: for(let i = 1; i <= 3; i++) {
  for(let j = 1; j <= 3; j++) {
    if(j === 2) continue outer;
    console.log(i, j);
  }
}

medium

A. 1 1
1 3
2 1
3 1

B. 1 1
2 1
3 1

C. 1 1
1 3
2 1
2 3
3 1
3 3

D. 1 1
2 2
3 3

Solution

1. Step 1: Understand continue outer;

   When j === 2, continue outer; skips to the next iteration of the outer loop, skipping the rest of inner loop and console.log for that i.

2. Step 2: Trace iterations

   For i=1: j=1 logs '1 1', j=2 triggers continue outer (skip to i=2). For i=2: j=1 logs '2 1', j=2 triggers continue outer (skip to i=3). For i=3: j=1 logs '3 1', j=2 triggers continue outer (loop ends after i=3).

3. Final Answer:

   1 1 2 1 3 1 -> Option B

4. Quick Check:

   continue outer skips inner loop rest [OK]

Hint: continue label skips to next outer loop iteration [OK]

Common Mistakes:

• Thinking continue outer skips only inner iteration
• Expecting all inner loop logs
• Confusing break and continue effects

4.

Find the error in this code snippet:

outerLoop: for(let i = 0; i < 2; i++) {
  for(let j = 0; j < 2; j++) {
    if(i === j) break;
    if(j === 1) continue outerLoop;
    console.log(i, j);
  }
}

medium

A. The label name is missing a colon.

B. Using continue outerLoop; inside inner loop is invalid.

C. The break; statement breaks only inner loop, not labeled loop.

D. No error; code runs correctly.

Solution

1. Step 1: Analyze break statement

   The break; without label breaks only the innermost loop, not the labeled outer loop.

2. Step 2: Check labeled continue usage

   The continue outerLoop; is valid and skips to next iteration of the labeled loop.

3. Final Answer:

   The break; statement breaks only inner loop, not labeled loop. -> Option C

4. Quick Check:

   break without label affects inner loop only [OK]

Hint: break without label breaks inner loop only [OK]

Common Mistakes:

• Assuming break breaks labeled loop without label
• Thinking continue outerLoop is invalid
• Confusing label syntax

5.

Given the nested loops below, how can you skip all remaining iterations of the outer loop when j === 3?

outerLoop: for(let i = 1; i <= 5; i++) {
  for(let j = 1; j <= 5; j++) {
    if(j === 3) {
      // What statement here?
    }
    console.log(i, j);
  }
}

hard

A. continue outerLoop;

B. break;

C. continue;

D. break outerLoop;

Solution

1. Step 1: Understand the goal

   We want to stop all remaining iterations of the outer loop when j === 3, meaning exit the outer loop completely.

2. Step 2: Choose correct statement

   break outerLoop; exits the labeled outer loop immediately. Plain break; exits only inner loop. continue; and continue outerLoop; skip iterations but do not exit the outer loop.

3. Final Answer:

   break outerLoop; -> Option D

4. Quick Check:

   break label exits labeled loop [OK]

Hint: Use break label to exit outer loop immediately [OK]

Common Mistakes:

• Using break without label to exit outer loop
• Using continue instead of break
• Confusing continue label with break label