How to Break Loops in JavaScript

Sometimes we are looping through arrays to do some work. Often we don’t need to loop all the way through.

Then we need to stop looping or break out of the loop.

In this article, I will show you different kinds of JavaScript loops and examples of how you can break the loop.

Table of Contents hide

1 How to Break out of a for Loop in JavaScript

2 How to Break out of a Nested Loop in JavaScript

3 How to Break out of a for of Loop in JavaScript

4 How to Break out of a while loop in JavaScript

5 How to Break Out of a foreach Loop in JavaScript

How to Break out of a for Loop in JavaScript

let array = [1, 2, 3, 4];

for (let index = 0; index < array.length; index++) {
    const element = array[index];

    if (element === 3) {
        break;
    }
    console.log(element);
}

console.log("Finished looping");

1
2
Finished looping

Pretty simple. We just write break; when we meet the condition we want. we will then end the for loop.

How to Break out of a Nested Loop in JavaScript

Take a look at this example

let array = [1, 2, 3, 4];
let nestedArray = [1, 2, 3, 4];

for (let index = 0; index < array.length; index++) {
    const element = array[index];

    for (let nestedIndex = 0; nestedIndex < nestedArray.length; nestedIndex++) {
        const nestedElement = nestedArray[nestedIndex];

        if (element === 3 && nestedElement === 3) {
            console.log("Break out of the loop");
            break;
        }

        console.log("nestedElement", nestedElement);

    }

    console.log("element", element);
}

console.log("Finished looping");

This will give the following output:

nestedElement 1
nestedElement 2
nestedElement 3
nestedElement 4
element 1
nestedElement 1
nestedElement 2
nestedElement 3
nestedElement 4
element 2
nestedElement 1
nestedElement 2
Break out of the loop
element 3
nestedElement 1
nestedElement 2
nestedElement 3
nestedElement 4
element 4
Finished looping

As you can see, we break out of the nested loop, but the loop continues in the outer loop.

This is not what we want. We want to break out of both the loops.

We can easily solve this by naming our loop:

let array = [1, 2, 3, 4];
let nestedArray = [1, 2, 3, 4];

outer_loop:
for (let index = 0; index < array.length; index++) {
    const element = array[index];

    for (let nestedIndex = 0; nestedIndex < nestedArray.length; nestedIndex++) {
        const nestedElement = nestedArray[nestedIndex];

        if (element === 3 && nestedElement === 3) {
            console.log("Break out of the loop");
            break outer_loop;
        }

        console.log("nestedElement", nestedElement);

    }

    console.log("element", element);
}

console.log("Finished looping");

We set our name to outer_loop: right before the start of our outer loop. Then we just define what we will break with break outer_loop;

How to Break out of a for of Loop in JavaScript

When breaking a for of loop, we do the same as a for loop. We just set break; and we are out of the loop.

let array = [1, 2, 3, 4];

for (const element of array) {

    if (element === 3) {
        break;
    }

    console.log(element);
}

console.log("Finished looping");

How to Break out of a while loop in JavaScript

Usually, you will break out of a while loop by setting the while condition to false.

let counter = 0;
let isLooping = true;

while (isLooping) {
    counter++;
    if (counter === 4) {
        isLooping = false;
    }
    console.log(counter);
}

console.log("Finished looping");

This will give the following output:

1
2
3
4
Finished looping

When you set isLooping to false, it will break out of the loop.

However, the while loop will still finish even when you set isLooping to false. You can see that in the output since we print out 4.

We can easily fix that by writing break; like we did in the other loops:

let counter = 0;
let isLooping = true;

while (isLooping) {
    counter++;
    if (counter === 4) {
        isLooping = false;
        break;
    }
    console.log(counter);
}

console.log("Finished looping");

Output:

1
2
3
Finished looping

How to Break Out of a foreach Loop in JavaScript

If you try to use the break; statement in a foreach loop, you might be surprised at the result.

Let’s look at an example:

let array = [1, 2, 3, 4];

array.forEach(element => {
    if (element === 3) {
        break;
    }
    console.log(element);
})

console.log("Finished looping");

This will give the following output:

SyntaxError: Illegal break statement
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

It turns out that using break inside a foreach is not supported in JavaScript.

If you need to break out of a loop, I would recommend you to rather use a for of loop.