How to Break from forEach in JavaScript?

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:

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:

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

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

console.log(doubled); // [ 2, 4, 6, 8 ]

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.

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

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

console.log(doubled); // [ 2, 4 ]

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():

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

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

console.log(doubled); // [ 2, 4 ]

Secondly, let's use some():

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

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

console.log(doubled); // [ 2, 4 ]

Using a Variable Helper

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

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

let shouldBreak = false; // Variable helper

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

console.log(doubled); // [ 2, 4 ]

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:

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