How To Break A forEach() Loop In Typescript

How to break a forEach() loop in TypeScript? Today we will help you answer this question. Let’s check it out!

How to break a forEach() loop in TypeScript

You might hear about the break statement, which can stop a loop logic. So let’s try it here.

Example:

const animalList: string[] = [
    "African Elephant",
    "Africanized Bees",
    "Ants",
    "Arctic Wolf",
    "Orangutan",
    "Osprey",
    "Penguin",
    "Pine Marten",
    "Rabbits"
];

animalList.forEach((ele, index) => {
    if (index != 5) {
        console.log(ele);
    } else {
        break;
    }
});

Here I make a forEach loop to log the animal’s name in animalList array. I also set a condition that if the index is equal to five, the forEach loop will break. But here I got an error.

Error:

Jump target cannot cross function boundary

The error happens here because the break statement can only use to stop a loop inside a loop, like for…of loop, for…in loop, …etc, not with the forEach loop. So we have to do another solution.

Use try/catch

The try/catch will help you to create a block to execute your code. It also provides a catch statement to handle the error in your code. So when the logic in the try statement gets wrong catch statement will execute. So we can apply try/catch like a trick to break out forEach loop.

Example:

const animalList: string[] = [
    "African Elephant",
    "Africanized Bees",
    "Ants",
    "Arctic Wolf",
    "Orangutan",
    "Osprey",
    "Penguin",
    "Pine Marten",
    "Rabbits"
];

try {
    animalList.forEach((ele: string, index: number) => {
        if (index != 5) {
            console.log(ele);
            console.log(index);
        } else {
            throw "shouldStop";
        }
    });
} catch (error) {
    console.error(error);
}

Output:

[LOG]: "African Elephant" 
[LOG]: 0 
[LOG]: "Africanized Bees" 
[LOG]: 1 
[LOG]: "Ants" 
[LOG]: 2 
[LOG]: "Arctic Wolf" 
[LOG]: 3 
[LOG]: "Orangutan" 
[LOG]: 4 
[ERR]: "shouldStop" 

In this example I indicate that if the index equals five, I’ll throw a message error ‘shouldStop’ to the catch statement. Then from the catch statement, I log a message error and stop the forEach loop.

Use another loop 

With the forEach method, you will change your origin array. So if you do not have to, you can use another loop statement to replace it, like essential for loops.

Example:

const animalList: string[] = [
    "African Elephant",
    "Africanized Bees",
    "Ants",
    "Arctic Wolf",
    "Orangutan",
    "Osprey",
    "Penguin",
    "Pine Marten",
    "Rabbits"
];

for (let i = 0; i < animalList.length; i++) {
    if (i != 5) {
        console.log(animalList[i]);
        console.log(i);
    } else {
        break;
    }
}

Output:

[LOG]: "African Elephant" 
[LOG]: 0 
[LOG]: "Africanized Bees" 
[LOG]: 1 
[LOG]: "Ants" 
[LOG]: 2 
[LOG]: "Arctic Wolf" 
[LOG]: 3 
[LOG]: "Orangutan" 
[LOG]: 4 

With basic for loop, I can also make logic like forEach loop and use the break statement to stop forEach loop.

Summary

In this tutorial, I have explained how to break a forEach() loop in TypeScript. You can use try/catch, or you can use another loop to apply the break statement. Good luck for you!

Maybe you are interested:

• Understanding ‘as const’ in TypeScript
• How To Initialize And Type A Map In Typescript
• How To Get An Enum Key By Value In Typescript

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm