Under normal circumstances, a standard for
loop will continue to execute while it’s evaluated condition remains true
, making it all-too-easy for beginners to create infinite loops that will potentially lock up the browser and/or your editor.
Modern browsers will eventually interrupt this behaviour with a dialog or by terminating the script, but it’s also possible to create an “eject button” inside the loop by using break
. The statement isn’t useful just as a safeguard: by testing conditions and using break
in a response, we can escape loops early, before they have reached their end.
break
Let’s say we have a fairly standard for
loop:
for (var i = 0; i < 6; i++) {
// do something
}
Let’s also say that if the variable i
was ever equal to 3, we wanted to exit the loop. We can do that by placing an if
statement inside the loop, with break
as the result:
for (var i = 0; i < 6; i++) {
if (i === 3) { break; }
}
console.log("We’ve broken out");
A break will immediately eject from a loop, without executing anything else inside it.
In real life, this is a simplistic example: if you wanted to exit a loop after three iterations, you could simply make that the initial condition. A better example might be encountering a particular element in an array: a “stop word” that, when encountered, would cause your script to do something else. For the same of argument, let’s say you wanted to print out the contents of an array until you encountered the stop word (which we’ll say is “escape”).
Our script becomes:
var loanWords = ["Alcatraz", "San Quentin", "Folsom", "escape", "Sing Sing"];
for (var i = 0; i < loanWords.length; i++) {
if (loanWords[i] == "escape") {
break;
}
console.log(loanWords[i]);
}
The result in the console:
> Alcatraz
> San Quentin
> Folsom
The code prints out the name of the first three prisons in the array, and breaks when it encounters the stop word.
continue
break
is an absolute statement: it wrenches execution out of the loop entirely. continue
is different: it allows you to continue running the the loop, but “skips” over the iteration that it is currently in.
Returning to our previous code, we’ll substitute continue
for break
:
for (var i = 0; i < loanWords.length; i++) {
if (loanWords[i] == "escape") {
continue;
}
console.log(loanWords[i]);
}
The result:
> Alcatraz
> San Quentin
> Folsom
> Sing Sing
The print out now includes Sing Sing but excludes the escape
element. Technically, continue
has forced our script to leap to the update expression (i++
) effectively jumping over the “escape” entry.
continue
behaves somewhat differently in the context of a while
loop: not “knowing” where the iterator is in the code, it jumps back to the condition. Because of this, it’s easy to write infinite loops in while
loops with continue
unless you’re very careful, and as a general rule, I wouldn’t recommend doing so.
Conclusion
Used judiciously, break
can be extremely useful for coders. It’s common for break
to be used in switch
statements too, although that aspect will be covered in another article.
Photograph by Maurizio Sorvillo, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.