Mohamed Mayallo

Posted on Jun 17, 2023 • Edited on Jun 26, 2023 • Originally published at mayallo.com

How to Break from forEach in JavaScript?

#javascript #typescript #beginners #coding

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);

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);

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);

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);

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; 

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.