Rethinking async loops in JavaScript - Matt Smith

"Using await in loops seems intuitive until your code silently stalls or runs slower than expected. If you've ever wondered why your API calls run one-by-one instead of all at once, or why map() and await don't mix the way you'd expect, grab a chair. Let's chat. The problem: awaiting in a for loop Suppose you're fetching a list of users one-by-one: const users = [1, 2, 3]; for (const id of users) { const user = await fetchUser(id); console.log(user); } This works, but it runs sequentially: fetchUser(2) doesn't start until fetchUser(1) finishes. That's fine if order matters, but it's inefficient for independent network calls."

"Don't await inside map() unless you mean to A common point of confusion is using await inside map() without handling the resulting promises: const users = [1, 2, 3]; const results = users.map(async id => { const user = await fetchUser(id); return user; }); console.log(results); // [Promise, Promise, Promise] - NOT actual user data This works in terms of syntax and behavior (it returns an array of promises), but not in the way many expect. It doesn't wait for the promises to resolve."

"Promise.all() fails fast, even if just one call breaks When using Promise.all(), a single rejection causes the entire operation to fail: const results = await Promise.all( users.map(id => fetchUser(id)) // fetchUser(2) might throw ); If fetchUser(2) throws an error (e.g., 404 or network error), the entire Promise.all call will reject, and none of the results will be returned (including successful ones). ⚠️ Note: Promise.all() rejects on the first error, discarding other results. Remaining promises still run, but only the first rejection is reported unless you handle each one individually."

Awaiting inside a for loop executes async operations sequentially, delaying each start until the previous completes. Using async callbacks inside map returns an array of promises rather than resolved values. Promise.all runs multiple independent async calls in parallel and yields their results when awaited. Promise.all rejects immediately on the first failing promise, causing loss of the successful results unless errors are handled. Remaining promises continue to execute but only the first rejection is reported. Safer patterns include Promise.allSettled or wrapping each promise with error handling to capture per-call outcomes.

Read at Allthingssmitty