You Simply Cannot Do These Things in a forEach Loop in JavaScript
Four reasons for switching back to the normal for loop
Cover Photo by Marc Schulte on Unsplash
If you think you know how a forEach loop works, you might be wrong. Here are four things you simply cannot do in a forEach loop.
"return" Statement Simply Doesn't Stop the Loop
If you think the below code only prints 1 2 3, you are wrong.
The reason for this behavior is that we are passing a callback function in our forEach loop, which behaves just like a normal function and is applied to each element no matter if we return from one.
According to the MSDN Docs:
"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."
"break" Statements Don't Work
Do you think the below loop will terminate when the element is equal to three?
Think again.
The above code will throw an exception.
Uncaught SyntaxError: Illegal break statement
This is because, technically, the break statement is not inside a loop.
"continue" Statements Would Not Work As Well
Do you think that this code would only print 1 2 4?
No. You are wrong. You would end up with the following exception:
Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
You would have guessed the reason for this exception by now.
Yes! The continue statement is not executing inside a loop, similar to the break incident mentioned above.
You Cannot async-await
I kept the best for the last.
I learned this the hard way. After days of debugging, I finally realized that you cannot async-await inside a forEach loop. Take a look at the code below. Guess what the output would be.
Done
1
2
3
4
Surprisingly, the loop did not wait for the promise to be resolved.
This is because our forEach returns a Promise (since it's wrapped into an async function), but we are not waiting for it to be done before logging 'Done'.
We can obtain the intended output with the following modified code.
1
2
3
4
Done
Hooray! We did it. But phew, that was quite some work, wasn't it?
This is a platform-dependent code with unexpected outputs. Hence we should always try to avoid these kinds of situations when shipping production code.
How to Avoid the Headaches - A Very Simple Solution
Use the normal for loop
Yes. You can avoid all the above-mentioned issues simply by using the traditional for loop instead of the forEach loop.
No one will tease you for using it. They probably haven't read this piece or haven't spent days debugging to find out what is wrong with their forEach loop.
Conclusion
When something new is introduced, we love to try it out. And if it looks clean and simple, we switch to it without knowing how it exactly works. Sometimes the traditional way of doing things is far better than the modern counterparts. That being said, forEach have their own advantages like cleaner syntax. But you should know when to use what.
Happy coding!
Resources