How to Break Out of a forEach Loop in TypeScript?

In this tutorial, I will explain how to break out of a forEach loop in TypeScript with detailed examples. The forEach loop is mainly used to iterate over array elements, but you may encounter situations where you need to break out of the loop based on certain conditions.

Why You Can’t Directly Break Out of a forEach Loop

It’s important to note that you cannot directly use the break statement inside a forEach loop in TypeScript or JavaScript. If you attempt to do so, you will encounter an error that says “Illegal break statement”.

The reason for this is that the forEach loop is a higher-order function that takes a callback function as an argument. The break statement is not valid within the context of the callback function.

Check out for…in Loops in TypeScript

Alternative Approaches to Breaking Out of a forEach Loop

There are some other approaches to breaking out of a foreach loop in TypeScript. Let me explain with some examples.

1. Using some() Method

If you need to break out of the loop based on a specific condition in TypeScript, you can use the some() method instead of forEach. The some() method tests whether at least one element in the array satisfies the provided condition. It stops iterating as soon as the condition is met.

Here’s an example:

const employees = [
  { name: "John Doe", age: 35, city: "New York" },
  { name: "Jane Smith", age: 28, city: "Los Angeles" },
  { name: "Mike Johnson", age: 42, city: "Chicago" },
];

employees.some((employee) => {
  if (employee.city === "Los Angeles") {
    console.log(`Found employee in Los Angeles: ${employee.name}`);
    return true; // Break out of the loop
  }
});

In this example, we have an array of employee objects. We use the some() method to iterate over the array and check if any employee’s city is “Los Angeles”. If a matching employee is found, we log a message and return true to break out of the loop.

Here is the exact output in the screenshot below:

Read How to Use for…of Loops in TypeScript?

2. Using a Traditional for Loop

If you prefer a more traditional approach, you can use a regular for loop instead of forEach. With a for loop, you have full control over the iteration process and can use the break statement to exit the loop when needed.

Here’s an example:

const products = [
  { name: "iPhone", price: 999 },
  { name: "MacBook Pro", price: 1999 },
  { name: "iPad", price: 799 },
];

for (let i = 0; i < products.length; i++) {
  if (products[i].price > 1000) {
    console.log(`Found product above $1000: ${products[i].name}`);
    break; // Break out of the loop
  }
}

In this example, we have an array of product objects. We use a for loop to iterate over the array and check if any product’s price is greater than $1000. If a matching product is found, we log a message and use the break statement to exit the loop.

Here is the exact output in the screenshot below:

Conclusion

While you cannot directly use the break statement inside a forEach loop in TypeScript, there are alternative approaches you can use to achieve similar functionality. You can use the some() method to break out of the loop based on a condition, or you can switch to a traditional for loop for more control over the iteration process.

In this tutorial, I explained two methods to break out of a forEach Loop in TypeScript with some examples.

You may also like:

• TypeScript forEach Loop with Index