What Does `Return` Keyword Mean Inside `Foreach` Function? [Duplicate]

Question

$('button').click(function () {
   [1, 2, 3, 4, 5].forEach(function (n) {
      if (n == 3) {
         // it should break out here and doesn't alert anything after
         return false
      }
      alert(n)      
   })
})

<script src=""></script>
<button>Click me</button>

My question: Why does it still alert next number although I call return? Just like: Ignore the code below and continue with next element

Accepted Answer

From the Mozilla Developer Network:

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.

Early termination may be accomplished with:

A simple loop

A for...of loop

Array.prototype.every()

Array.prototype.some()

Array.prototype.find()

Array.prototype.findIndex()

The other Array methods: every(), some(), find(), and findIndex() test the array elements with a predicate returning a truthy value to determine if further iteration is required.

Answer 2

The return exits the current function, but the iterations keeps on, so you get the "next" item that skips the if and alerts the 4...

If you need to stop the looping, you should just use a plain for loop like so:

$('button').click(function () {
   var arr = [1, 2, 3, 4, 5];
   for(var i = 0; i < arr.length; i++) {
     var n = arr[i]; 
     if (n == 3) {
         break;
      }
      alert(n);
   })
})

You can read more about js break & continue here:

What Does `Return` Keyword Mean Inside `Foreach` Function? [Duplicate]

Must Read

2 Answers

Sarah Jenkins