async functions always return a Promise; await pauses execution inside an async function until a Promise settles — giving asynchronous code the readability of synchronous code without blocking the event loop.
Explanation
async/await is syntactic sugar over Promises, introduced in ES2017. Marking a function async makes it return a Promise implicitly — even a bare return value is wrapped. Inside an async function, await suspends execution until the awaited Promise resolves, then resumes with the resolved value. If the Promise rejects, await throws the rejection reason, making try/catch the natural error-handling pattern. Crucially, await does not block the thread — while waiting, the event loop is free to run other tasks. Multiple independent async operations should be parallelised with Promise.all() rather than awaited sequentially. Top-level await is supported in ES modules. Common pitfalls: forgetting await (getting a Promise instead of its value), sequential awaiting in a loop instead of parallelising, and unhandled rejections when an async function throws inside an event handler with no wrapping try/catch.
Watch Out
⚠ An async function called inside addEventListener or forEach without await propagates an unhandled Promise rejection that is very difficult to debug — always add try/catch inside async event handlers.
Common Misconception
✗ await does not block the thread or pause the event loop — it only suspends the current async function, allowing other callbacks and tasks to run while waiting.
Why It Matters
async/await eliminates callback hell and Promise chain nesting, making asynchronous code readable and maintainable — most modern JS codebases including Node.js backends and browser fetch calls rely on it.
Common Mistakes
Forgetting await — const data = fetch(url) gives a Promise object, not the response body.
Awaiting in a loop sequentially when the iterations are independent — use Promise.all() to run them in parallel.
Missing try/catch around await — an unhandled rejection inside an async function crashes Node.js workers or produces silent failures in browsers.
Using async in an Array.forEach callback — forEach does not await the returned Promises, so the loop finishes before the async work completes.
Code Examples
💡 Note
The bad example awaits each fetch in sequence — 10 requests × 200ms = 2 seconds total. Promise.all fires all requests simultaneously, completing in ~200ms regardless of count.
✗ Vulnerable
// Sequential awaits — total time = sum of all request times:
async function loadAll(ids) {
const results = [];
for (const id of ids) {
results.push(await fetch(`/api/${id}`)); // waits for each in turn
}
return results;
}
✓ Fixed
// Parallel with Promise.all — total time = slowest single request:
async function loadAll(ids) {
const promises = ids.map(id => fetch(`/api/${id}`));
return Promise.all(promises); // all requests in flight simultaneously
}
