TLDR: Use for...of instead of forEach in asynchronous code.
Array.prototype.forEach is not designed for asynchronous code. (It was not suitable for promises, and it is not suitable for async-await.)
For example, the following forEach loop might not do what it appears to do:
const players = await this.getWinners();
players.forEach(async (player) => {
await givePrizeToPlayer(player);
});
await sendEmailToAdmin('All prizes awarded');What's wrong with it?
- The promises returned by the iterator function are not handled. So if one of them throws an error, the error won't be caught. (In Node 10, if no
unhandledrejectionlistener has been registered, that will cause the process to crash!) - Because
forEachdoes not wait for each promise to resolve, all the prizes are awarded in parallel, not serial (one by one). - So the loop actually finishes iterating before any of the prizes have finished been awarded (but after they have all started being awarded).
- As a result,
sendEmailToAdmin()sends the email before any of the prizes have finished being awarded. Maybe none of them will end up being awarded (they might all throw an error)!
Fortunately if your language has async-await then it will also have the for...of construction, so you can use that.
for (const player of players) {
await givePrizeToPlayer(player);
}This loop will wait for one prize to be awarded before proceeding to the next one.
You could also use a traditional for(...;...;...) here but that is more verbose than we need.
Note: The airbnb style guide recommends not using for...of for web apps at the current time (2018), because it requires a large polyfill. If you are working in the browser, use the traditional for mentioned above, or Array.reduce() described below.
If the order doesn't matter, it may be quicker to process all the players in parallel.
await Promise.all(players.map(async (player) => {
await givePrizeToPlayer(player);
}));This will start awarding all the prizes at once, but it will wait for them all to complete before proceeding to sendEmailToAdmin().
Some people recommend this approach:
await players.reduce(async (a, player) => {
await a;
await givePrizeToPlayer(player);
}, Promise.resolve());This has pretty much the same behaviour as the for...of above, but is slightly harder to read.
However it is recommended by the Airbnb style guide because it can reduce the browser bundle size. for...of requires iterators, and some browsers require a polyfill for iterators, and that polyfill is quite large. You can decide on the trade-off between bundle size and developer convenience.