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.