Are you ready for another exciting journey? Today's mission involves understanding the break and continue commands. The break command immediately ends a loop regardless of the defined condition, while the continue command bypasses the remaining loop iteration and jumps straight to the next one.
We'll start by mastering these controls using simple for and while loops before delving into the complexity of nested loops.
Remember the for loop? Its iteration continues until a condition is met. Let's meet a new friend — break. Once encountered, the loop stops, no matter what!
To understand better, let's think of a treasure hunt, where each box is a loop iteration. Opening a box executes the loop, and finding treasure (break) halts the opening spree. Here's how it works in JavaScript:
JavaScript1for (let i = 0; i <= 10; i++) { 2 if (i === 5) { 3 console.log("Treasure found at position", i); // Our treasure is at the position 5. 4 break; // STOP! We got the treasure. No need to continue opening more boxes. 5 } 6 console.log("No treasure at position:", i); 7} 8/* 9Prints: 10No treasure at position: 0 11No treasure at position: 1 12No treasure at position: 2 13No treasure at position: 3 14No treasure at position: 4 15Treasure found at position 5 16*/
See? Even though the loop was intended to go through numbers 0 to 9, due to break at i = 5, the remaining iterations were not executed at all.
The continue command skips the current loop iteration and jumps to the next one. Imagine eating fruits from a basket and deciding to skip an apple. That's exactly what the continue command does. Here's how:
JavaScript1for (let i = 0; i < 10; i++) { 2 if (i === 5) { // Position 5 is where the apple is. 3 continue; // SKIP! No apple for me, thank you. Onto the next fruit! 4 } 5 console.log("Eating fruit at position:", i); 6} 7/* 8Prints: 9Eating fruit at position: 0 10Eating fruit at position: 1 11Eating fruit at position: 2 12Eating fruit at position: 3 13Eating fruit at position: 4 14Eating fruit at position: 6 15Eating fruit at position: 7 16Eating fruit at position: 8 17Eating fruit at position: 9 18*/
As you can see, the loop traversed all numbers from 0 to 9, but skipped logging for i = 5, due to the continue statement.
The break and continue commands also apply to while loops the same way. Let's say we're reading a book but want to skip chapter 5 using continue.
JavaScript1let chapter = 1; 2 3while (chapter <= 10) { 4 chapter++; 5 if (chapter === 5) { // We've reached chapter 5. 6 continue; // SKIP! Let's move on to chapter 6. 7 } 8 console.log("Reading chapter:", chapter); 9} 10/* 11Prints: 12Reading chapter: 1 13Reading chapter: 2 14Reading chapter: 3 15Reading chapter: 4 16Reading chapter: 6 17Reading chapter: 7 18Reading chapter: 8 19Reading chapter: 9 20Reading chapter: 10 21*/
Now, suppose we're scrolling through a photo album, and we want to stop at a particular photo:
JavaScript1let photo = 0; 2 3while (photo < 100) { 4 photo++; 5 if (photo === 23) { // We've found our desired photo. 6 console.log("Found the photo at position", photo); 7 break; // STOP! We've got our photo. No need to scroll further. 8 } 9} 10/* 11Prints: 12Found the photo at position 23
Remember Russian nesting dolls? Picture nested boxes with a hidden note inside. The break command helps terminate the nested loop as soon as the note is found:
JavaScript1for (let outerDoll = 0; outerDoll < 3; outerDoll++) { 2 for (let innerDoll = 0; innerDoll < 3; innerDoll++) { 3 if (outerDoll === 1 && innerDoll === 1) { // We've found the note in an inner doll housed by an outer doll. 4 console.log("Found the note in outer doll", outerDoll, "and inner doll", innerDoll); 5 break; // STOP! We've found the note. No need to uncover more dolls. 6 // break statement finishes execution only for the inner loop, the outer loop continues 7 } 8 console.log("Searching at outer doll", outerDoll, "and inner doll", innerDoll); 9 } 10} 11/* 12Prints: 13Searching at outer doll 0 and inner doll 0 14Searching at outer doll 0 and inner doll 1 15Searching at outer doll 0 and inner doll 2 16Searching at outer doll 1 and inner doll 0 17Found the note in outer doll 1 and inner doll 1 18Searching at outer doll 2 and inner doll 0 19Searching at outer doll 2 and inner doll 1 20Searching at outer doll 2 and inner doll 2 21*/
As you can see, when we found the note for outerDoll = 1, the inner loop didn't continue its execution. However, the loop for outerDoll = 2 executed as usual, as break exited only from the inner loop.
Well done! Today's journey introduced us to the break and continue commands in for and while loops in JavaScript. We learned how to use these commands in single loops and then applied that understanding to nested loops. Up next, we have some practice exercises to help solidify your newfound knowledge. Remember, practice makes perfect. Watch out, Space Coder — we're making great progress!