Labeled break and continue in Javascript - Mini Project: Build & Apply

Using Labeled break and continue in JavaScript

📖 Scenario: Imagine you are managing a small warehouse. You have a list of shelves, and each shelf has boxes with different items. You want to find a specific item quickly and also skip certain shelves based on a condition.

🎯 Goal: You will write a program that uses labeled break and continue statements to control loops effectively. This will help you stop searching when you find the item or skip shelves that are empty.

📋 What You'll Learn

Create a nested array called shelves with 3 shelves, each shelf is an array of items (strings).

Create a variable called targetItem with the value 'apple'.

Use a labeled outer loop called searchShelves to go through each shelf.

Inside the outer loop, use an inner loop to go through each item in the shelf.

Use continue searchShelves to skip the shelf if it is empty.

Use break searchShelves to stop all searching when targetItem is found.

Print 'Found apple!' when the item is found.

💡 Why This Matters

🌍 Real World

In real warehouses or stores, quickly finding items and skipping empty shelves saves time and effort.

💼 Career

Understanding labeled break and continue helps in writing efficient loops in software development, especially when dealing with nested data or complex conditions.

1

Create the shelves data

Create a variable called shelves that is an array with these exact arrays inside: ['banana', 'orange'], [], and ['apple', 'grape'].

Javascript

// Create the shelves array with the exact values
// Your code here

Hint

Remember, shelves is an array of arrays. The second shelf is empty.

2

Set the target item

Create a variable called targetItem and set it to the string 'apple'.

Javascript

const shelves = [['banana', 'orange'], [], ['apple', 'grape']];
// Create the targetItem variable and set it to 'apple'
// Your code here

Hint

Use const targetItem = 'apple'; to create the variable.

3

Use labeled loops with break and continue

Write a labeled loop called searchShelves that loops over shelves with variable i. Inside it, if the shelf is empty (length 0), use continue searchShelves to skip it. Then loop over the items with variable j. If the item equals targetItem, use break searchShelves to stop all loops.

Javascript

const shelves = [['banana', 'orange'], [], ['apple', 'grape']];
const targetItem = 'apple';

// Write the labeled loops with break and continue
// Your code here

Hint

Use searchShelves: before the outer loop. Use continue searchShelves; to skip empty shelves. Use break searchShelves; to stop when found.

4

Print when the item is found

After the loops, write console.log('Found apple!'); to print the message when the targetItem is found.

Javascript

const shelves = [['banana', 'orange'], [], ['apple', 'grape']];
const targetItem = 'apple';

searchShelves: for (let i = 0; i < shelves.length; i++) {
    if (shelves[i].length === 0) {
        continue searchShelves;
    }
    for (let j = 0; j < shelves[i].length; j++) {
        if (shelves[i][j] === targetItem) {
            break searchShelves;
        }
    }
}

// Print the found message
// Your code here

Hint

Use console.log('Found apple!'); after the loops to show the message.

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