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.