async/await in Loops in JavaScript

async/await in Loops in JavaScript

Using await in loops is a common source of confusion. Here is how to do it correctly in each loop type.

for...of (Sequential)

for (const url of urls) {
  const data = await fetch(url);
  process(data);
}

This is sequential: each fetch waits for the previous one. Good for dependent operations, slow for independent ones.

forEach (Does NOT Work)

// bad: forEach does not await
urls.forEach(async (url) => {
  const data = await fetch(url);
  process(data); // runs in parallel, not sequential
});
console.log("done"); // logs before any fetch completes

forEach does not await the async callback. The loop finishes immediately, and the fetches run in parallel in the background. This is usually not what you want.

map (Parallel with Promise.all)

const results = await Promise.all(
  urls.map((url) => fetch(url).then((r) => r.json()))
);
results.forEach(process);

This is parallel: all fetches start at once. Good for independent operations.

while (Sequential)

let i = 0;
while (i < urls.length) {
  const data = await fetch(urls[i]);
  process(data);
  i++;
}

for (Sequential)

for (let i = 0; i < urls.length; i++) {
  const data = await fetch(urls[i]);
  process(data);
}

Parallel with Concurrency Limit

async function parallelWithLimit(items, limit, fn) {
  const results = [];
  for (let i = 0; i < items.length; i += limit) {
    const batch = items.slice(i, i + limit);
    const batchResults = await Promise.all(batch.map(fn));
    results.push(...batchResults);
  }
  return results;
}

Process limit items at a time (e.g., 5 at a time) to avoid overwhelming the server.

Which to Use?

• Sequential (dependent): for...of, while, for.
• Parallel (independent): Promise.all with .map.
• Parallel with limit: custom batching.
• Never: forEach with await (it does not await).

The Takeaway

for...of supports sequential await. forEach does not await (avoid). Promise.all with .map is parallel. For concurrency limits, batch with Promise.all. Use sequential for dependent operations, parallel for independent, and never use forEach with await.