Why forEach + async/await Breaks and How to Properly Await in JavaScript

forEach

and async/await look like a compatible pair, but in practice they betray each other; the article shares the author’s real‑world pitfall and shows how to avoid it.

Story Start: A Harmless Requirement

Imagine a request to batch‑update a group of users. The backend provides an updateUser(userId) function that returns a Promise. A naïve implementation might look like this:

const userIds = [1, 2, 3, 4, 5];
async function updateUserStatus(id) {
  console.log(`Starting update for ${id}...`);
  // simulate a 1‑second network request
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(`✅ User ${id} updated!`);
  return { success: true };
}
async function batchUpdateUsers(ids) {
  console.log("--- Starting batch update ---");
  ids.forEach(async (id) => {
    await updateUserStatus(id);
  });
  console.log("--- All users updated! ---"); // ⚠️ problem here
}
batchUpdateUsers(userIds);

Running this code prints "All users updated!" almost instantly, because forEach does not wait for the async callbacks to finish.

Problem Analysis: What forEach Actually Does

forEach

is designed as a synchronous iterator. It simply walks through each array element and calls the supplied callback synchronously , regardless of whether the callback returns a Promise or uses await. In other words, its internal monologue is:

“My job is to trigger, trigger, and trigger. When your async function finishes, I don’t care—I won’t wait for it.”

Correct Approach: Loops That Understand Promises

Solution 1 – The Honest Worker: for...of (Sequential Execution)

If you need to run async operations one after another, a for...of loop is ideal because it works naturally with await:

async function batchUpdateUsersInOrder(ids) {
  console.log("--- Starting batch update (sequential) ---");
  for (const id of ids) {
    // the await truly pauses the loop until the promise resolves
    await updateUserStatus(id);
  }
  console.log("--- All users updated! (this time really) ---");
}

Result:

The output now respects the intended order: each update finishes before the next begins.

Solution 2 – The Efficiency Champion: Promise.all + map (Parallel Execution)

When tasks are independent, you can launch them all at once and wait for every promise to settle: Array.prototype.map returns a new array; if the mapping function is async, the array contains pending promises. Promise.all takes that array and resolves only when all promises are fulfilled.

async function batchUpdateUsersInParallel(ids) {
  console.log("--- Starting batch update (parallel) ---");
  const promises = ids.map(id => updateUserStatus(id));
  await Promise.all(promises);
  console.log("--- All users updated! (this time really, and fast) ---");
}

Result:

This approach’s total time is roughly the duration of the slowest individual task, giving a huge performance boost.

Solution 3 – Flexible Alternatives: for...in and Traditional for Loops

Both for...in (for object keys) and classic for (let i = 0; …) loops also support await and behave similarly to for...of —they wait for each promise before proceeding:

// Traditional for loop
for (let i = 0; i < ids.length; i++) {
  await updateUserStatus(ids[i]);
}

Quick Reference Memo

• Use for...of when you need strict sequential execution. • Use Promise.all + map for parallel execution and maximum throughput (watch concurrency limits). • Never use forEach with await —it will fire all callbacks without waiting.