Are you prepared to dive into the deep end of TypeScript? Our expedition today will revolve around comprehending two essential instructions: the break
and continue
commands. The break
command, in its simplest terms, stops a looping structure dead in its tracks, disregarding its original condition. On the other hand, the continue
command bypasses the remaining loop iteration and immediately proceeds to the following one.
We'll get our hands dirty by understanding these commands using simple for
and while
loops, before exploring the intricacies of nested loops.
Recall the for
loop? Well, its iterations continue as long as the set condition is met. In this section, our agenda is to introduce and understand the concept of break
. Once this command is encountered, the loop abruptly stops, without any hesitation!
Let's imagine a game of hide-and-seek, where every hiding spot corresponds to an iteration of the loop. The game ends when the hidden object (break
) is found. Here's how it translates to TypeScript:
TypeScript1for (let i = 0; i <= 10; i++) { 2 if (i === 5) { 3 console.log(`Hidden object found at position ${i}`); // Our hidden object is at position 5 4 break; // STOP! We found the object. No need to search further. 5 } 6 console.log(`No hidden object at position:${i}`); 7} 8 9/* 10Prints: 11No hidden object at position: 0 12No hidden object at position: 1 13No hidden object at position: 2 14No hidden object at position: 3 15No hidden object at position: 4 16Hidden object found at position 5 17*/
Notice how the set of numbers from 0
to 10
couldn't execute fully due to the break
at i = 5
, terminating the subsequent iterations prematurely.
Now, the continue
command skips the current iteration and swiftly moves onto the next one. Picture this as picking candies from a jar while deciding to skip a specific candy. That's the essence of the continue
command.
TypeScript1for (let i = 0; i < 10; i++) { 2 if (i === 5) { // Position 5 has the candy we're avoiding 3 continue; // SKIP! No candy for me, thank you. On to the next candy! 4 } 5 console.log(`Picked candy at position: ${i}`); 6} 7/* 8Prints: 9Picked candy at position: 0 10Picked candy at position: 1 11Picked candy at position: 2 12Picked candy at position: 3 13Picked candy at position: 4 14Picked candy at position: 6 15Picked candy at position: 7 16Picked candy at position: 8 17Picked candy at position: 9 18*/
Observe how the continue
statement effectively omits i = 5
, and the loop covers all values from 0
to 9
.
The commands break
and continue
function in while
loops similarly to their behavior in for
loops. Imagine scrolling through a playlist, but deciding to skip song number 5:
TypeScript1let song = 0; 2 3while (song < 10) { 4 song++; 5 if (song === 5) { // We are at song number 5 6 continue; // SKIP! Let's move on to the next song. 7 } 8 console.log(`Playing song number: ${song}`); 9} 10 11/* 12Prints: 13Playing song number: 1 14Playing song number: 2 15Playing song number: 3 16Playing song number: 4 17Playing song number: 6 18Playing song number: 7 19Playing song number: 8 20Playing song number: 9 21Playing song number: 10 22*/
Now, let's imagine we're flipping through a photo album and wish to stop at a particular picture:
TypeScript1let photo = 0; 2 3while (photo < 100) { 4 photo++; 5 if (photo === 23) { // Found our preferred photo 6 console.log(`Found the photo at position: ${photo}`); 7 break; // STOP! We've found the photo. No need to keep searching. 8 } 9} 10 11// Prints: Found the photo at position: 23
Remember playing with nested puzzle boxes? The break
command allows us to conclude the nested loop operation once the puzzle is solved:
TypeScript1for (let outerBox = 0; outerBox < 3; outerBox++) { 2 for (let innerBox = 0; innerBox < 3; innerBox++) { 3 if (outerBox === 1 && innerBox === 1) { // The puzzle solution is inside the inner box of the outer box. 4 console.log(`Puzzle was inside outer box ${outerBox} and inner box ${innerBox}`); 5 break; // STOP! We've solved the puzzle. No need to open more boxes. 6 } 7 console.log(`Puzzling at outer box ${outerBox} and inner box ${innerBox}`); 8 } 9}
It's important to note that the break
command exclusively ends the inner loop, and the outer loop continues its execution. Since the puzzle is solved we'd technically want to end both loops but that's a topic for another lesson.
Congratulations! Today's deep dive has equipped us with an understanding of the break
and continue
commands in TypeScript. This knowledge was then used to control single and nested for
and while
loops. Make sure to practice what you have learned to cement your new knowledge. Keep coding, and see you in the next lesson!