In this article, I’ll show you 3 things which you might have not known about the forEach loop in JavaScript
Do you think you know exactly how the forEach
loop works in JS?
Well, these were my thoughts until recently: “just a regularfor
loop where you can easily use break
or return
or continue
“.
Today, I’ll show you 3 things which you might have not known about the forEach
loop.
Do you think the code below would print 1 2
and then stop?
array = [1, 2, 3, 4];
array.forEach(function (element) {
console.log(element);
if (element === 2)
return;
});
// Output: 1 2 3 4
No, it won’t. If you come from a Java background, you would probably ask yourself how is that possible?
The reason is that we are passing a callback function in our forEach
function, which behaves just like a normal function and is applied to each element no matter if we return
from one i.e. when element is 2 in our case.
From the official MDN docs:
There is no way to stop or break a
forEach()
loop other than by throwing an exception. If you need such behavior, theforEach()
method is the wrong tool.
Let’s rewrite the code from above:
const array = [1, 2, 3, 4];
const callback = function(element) {
console.log(element);
if (element === 2)
return; // would this make a difference? no.
}
for (let i = 0; i < array.length; i++) {
callback(array[i]);
}
// Output: 1 2 3 4
The return
statement won’t make any difference, as we apply the function to each element at each iteration, hence it doesn’t care if you exited once i.e. when element is 2.
Do you think aforEach
loop would break
in the example below?
const array = [1, 2, 3, 4];
array.forEach(function(element) {
console.log(element);
if (element === 2)
break;
});
// Output: Uncaught SyntaxError: Illegal break statement
No, it won’t even run because the break
instruction is not technically in a loop.
Solution?
Just use a normal for
loop. Nobody would laugh at you.
const array = [1, 2, 3, 4];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
if (array[i] === 2)
break;
}
// Output: 1 2
Do you expect the code below to skip printing 2
to the console and only show 1 3 4
?
const array = [1, 2, 3, 4];
array.forEach(function (element) {
if (element === 2)
continue;
console.log(element);
});
// Output: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
No, it won’t even run because the continue
instruction is not in a loop, similar to the break
instruction.
Solution?
Just use a normal for
loop again.
for (let i = 0; i < array.length; i++) {
if (array[i] === 2)
continue;
console.log(array[i]);
}
// Output: 1 3 4
That was it! Hope you learned something new today.
#javascript #web-development