JS Break

JavaScript break Statement

We have already seen the break keyword used in the switch statement. When break was executed, the switch statement ended immediately.

This behavior is not very different when it comes to loops: when the break statement is executed inside a loop, the loop will end immediately, even when the loop's condition is still true. The program control simply resumes at the next statement following the loop.

Example 1: Basic break in a for Loop

Here is a silly example to demonstrate how break works:

for (let i = 0; i < 10; i++) {
    console.log(i);
    if (i === 4) {
        break; // Stops the loop entirely!
    }
}

At first glance, it looks like a loop that will log the numbers 0 to 9 to the console. There is a catch here though: as soon as i equals 4, we execute the break command. break ends the loop immediately, so no more loop code gets executed afterward.

Example 2: Searching Through an Array

We can also use break to stop looping through an array of items (like cars) the moment we have found an item that matches our exact demands.

let cars = [
    { make: 'Ford', model: 'Fiesta', year: 2019, color: 'blue' },
    { make: 'Peugeot', model: '208', year: 2021, color: 'black' },
    { make: 'Tesla', model: 'Model 3', year: 2022, color: 'black' }
];

for (let i = 0; i < cars.length; i++) {
    if (cars[i].year >= 2020) {
        if (cars[i].color === "black") {
            console.log("I have found my new car:", cars[i]);
            break;
        }
    }
}

As soon as we run into a car with the year 2020 or later and the car is black (the Peugeot), we will stop looking for other cars and just buy that one. The last car in the array (the Tesla) would also have been an option, but we did not even consider it because we found one already and broke out of the loop!

Best Practices: Avoid while(true)

However, often it is not a best practice to use break. If you can manage to work with the natural condition of the loop to stop it instead, this is a much better practice. It prevents you from getting stuck in an infinite loop, and the code is easier to read.

If the condition of the loop is not an actual condition, but pretty much a run-forever kind of statement, the code gets very hard to read.

let superLongArray = [1, 5, 12, 55, 42, 99];

// BAD PRACTICE: Hard to read and prone to infinite loops
while (true) {
    if (superLongArray[0] != 42 && superLongArray.length > 0) {
        superLongArray.shift();
    } else {
        console.log("Found 42!");
        break;
    }
}

The Clean Alternative (Using a Flag)

This would be much better to write without break and without something terrible like while(true). You can do it by introducing a boolean "flag" variable (like notFound):

let notFound = true;

while (superLongArray.length > 0 && notFound) {
    if (superLongArray[0] != 42) {
        superLongArray.shift();
    } else {
        console.log("Found 42!");
        notFound = false; // This safely stops the loop!
    }
}

With the second example, we can see the conditions of the loop easily—namely, the length of the array and the notFound flag. You want to specify the condition so that it directly evaluates to true or false; this way your code is nice, safe, and easy to read.