Well, today I learnt an important lesson. 🤔

The Problem

In a recent coding effort, I found myself faced with the classic choice between JavaScript’s forEach and for… loops. As I was iterating through an array of data, I realized that my code required asynchronous operations.

Async/Await in forEach: Initially, I opted for the simplicity of forEach, but soon hit a roadblock. Despite my attempts to use async/await within the loop, I encountered unexpected behaviour. The asynchronous nature of forEach proved to be a block which led to unhandled promises and unpredictable results. Here’s what I was using:

// Using forEach (causes issues with async/await)
dataArray.forEach(async (item) => {
  await processItem(item); // This won't behave as expected
});

The solution

The solution is simple. Use for loop not foreach (of course when doing asynchronous operations).

// Using for loop (structured and reliable)
for (const item of dataArray) {
  await processItem(item); // Awaits completion before moving to the next item
}

No rocket science right? Now, why did I choose for loop? 🎬 the answer is simple, I found relief in its structured approach to asynchronous iteration. With async/await, each loop iteration awaited the completion of asynchronous tasks.