How to Break from forEach in JavaScript?
Tags: javascript, typescript, beginners, coding
Published: 2023-06-17 03:58:44


## Introduction


In JavaScript, `forEach()` is a **FUNCTION** that loops over an array of elements. It takes a callback as a parameter and applies it to every element in the array.

I know that you landed on this page to know the direct way to break from `forEach()`, but I'm sorry to tell you that **you can't**. As [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#:~:text=There%20is%20no%20way%20to%20stop%20or%20break%20a%20forEach()%20loop%20other%20than%20by%20throwing%20an%20exception.%20If%20you%20need%20such%20behavior%2C%20the%20forEach()%20method%20is%20the%20wrong%20tool.):

> There is no way to stop or break a `forEach()` loop other than by throwing an exception. If you need such behavior, the `forEach()` method is the wrong tool.

Having said that, you shouldn't use `forEach()` if you know previously that you might need to break from the loop. Instead, you should use `for...of`, **that's the perfect solution**.

However, for just the sake of learning, let's introduce some workarounds.

First of all, Let's consider the following example as a basis:

```javascript
const arr = [1, 2, 3, 4],
  doubled = [];

arr.forEach(num => {
  doubled.push(num * 2);
});

console.log(doubled); 
```


Consider the case, you want to break if the element was `3`.

## Using for...of Instead


As I said, that's the recommended solution as you can break from the loop easily using the `break` keyword.

```javascript
const arr = [1, 2, 3, 4],
  doubled = [];

for (const num of arr) {
  if (num === 3) break;
  doubled.push(num * 2);
}

console.log(doubled); 
```


## Using every() or some() Instead


In JavaScript, `every()` and `some()` are two functions like `forEach()`, the difference is that:

*   `every()`: Returns true if **every** callback returns true.
    
*   `some()`: Returns true if one callback **at least** returns true.
    

Fortunately, we can use these facts to break the loop as follows:

*   `every()`: You should return `false` at the element you want to break out.
    
*   `some()`: You should return `true` at the element you want to break out.
    

Firstly, let's use `every()`:

```javascript
const arr = [1, 2, 3, 4],
  doubled = [];

arr.every(num => {
  if (num === 3) return false;
  doubled.push(num * 2);
  return true;
})

console.log(doubled); 
```


Secondly, let's use `some()`:

```javascript
const arr = [1, 2, 3, 4],
  doubled = [];

arr.some(num => {
  if (num === 3) return true;
  doubled.push(num * 2);
  return false;
})

console.log(doubled); 
```


## Using a Variable Helper


In this workaround, you retain using the `forEach()` function. In addition, you use a variable that controls the flow.

```javascript
const arr = [1, 2, 3, 4],
  doubled = [];

let shouldBreak = false; 

arr.forEach(num => {
  if (num === 3) shouldBreak = true;
  if (shouldBreak === false) doubled.push(num * 2);
})

console.log(doubled); 
```


## Conclusion


In this article, we knew that there is no direct way to break from the `forEach()` function.

Then, we knew that it is preferable to use `for...of` instead to loop over an array of elements.

Finally, we introduced some workarounds that you can use to break from the `forEach()` function, like using other functions like `every()` or `some()`, or by using a variable helper that controls the flow.

## Before you leave


If you found this article useful, check out these articles as well:

*   [MongoDB GridFS Made Simple](https://mayallo.com/mongodb-gridfs/)
    
*   [Open-Closed Principle: The Hard Parts](https://mayallo.com/solid-open-closed-principle/)
    
*   [Isolation Levels In SQL Server With Examples](https://mayallo.com/isolation-levels-sql-server/)
    

Thanks a lot for staying with me up till this point. I hope you enjoy reading this article.