What is async/await and how does it work?

Question

Accepted Answer

async and await are syntactic sugar on top of promises. They let you write asynchronous code that reads like synchronous code while keeping all the non-blocking behaviour of promises. Introduced in ES2017, they have become the standard way to handle async work in modern JavaScript. The async keyword Marking a function async guarantees two things: it always returns a promise, and inside its body you can use await . A non-promise return value is automatically wrapped in Promise.resolve() ; a thrown error becomes a rejected promise. async function greet() { return "hi"; } greet().then(console.log); // "hi" The await keyword await pauses the async function until the awaited promise settles, then resumes with the fulfilled value. If the promise rejects, await throws, so ordinary try/catch handles errors. async function loadUser(id) { try { const res = await fetch(`/api/users/${id}`); const user = await res.json(); return user; } catch (err) { console.error("Failed to load user", err); throw err; } } What happens under the hood When the engine hits await , it returns control to the event loop. The remainder of the async function is scheduled as a microtask that fires when the awaited promise settles. This is why async / await never blocks the main thread. Running in sequence vs in parallel Awaiting one promise, then another, is sequential. To run independent requests in parallel, kick them off first and await them together. // Sequential — slow const a = await fetchA(); const b = await fetchB(); // Parallel — fast const [a, b] = await Promise.all([fetchA(), fetchB()]); Top-level await Inside ES modules you can use await at the top level without wrapping it in an async function. This is unavailable in regular scripts and CommonJS. Common pitfalls Forgetting await — returns the promise itself rather than its resolved value. Unhandled rejection — an async function called without .catch() or try/catch can silently swallow errors. Serial awaits in loops — for...of with await is sequential; use Promise.all with map for concurrency. Show sequential vs parallel (await in sequence vs Promise.all). The for...of loop (sequential) vs map+Promise.all (parallel) is frequently asked. try/catch replaces .catch for error handling. Know that async always returns a Promise.