How async/await Works Behind the Scenes in JavaScript

How async/await Works Behind the Scenes in JavaScript

async/await is syntactic sugar over promises. Understanding what happens behind the scenes helps you reason about timing and errors.

async Functions Return Promises

async function foo() {
  return 42;
}
// is roughly equivalent to:
function foo() {
  return Promise.resolve(42);
}

If you return a value, it is wrapped in Promise.resolve. If you throw, it is wrapped in Promise.reject.

await Yields to the Event Loop

When await is hit, the async function pauses and returns a pending promise to the caller. Control goes back to the caller.

async function foo() {
  console.log("1");
  await Promise.resolve();
  console.log("2");
}
foo();
console.log("3");
// output: 1, 3, 2

1. foo() is called. "1" logs.
2. await pauses foo. The rest ("2") is scheduled as a microtask.
3. "3" logs (synchronous, on the stack).
4. Stack is empty. Microtasks run: "2" logs.

await Unwraps the Promise

await promise returns the fulfilled value. If the promise rejects, await throws the rejection reason.

The Rest of the Function Is a Microtask

After await, the rest of the async function runs as a microtask (when the awaited promise settles). This is why async functions do not block the main thread.

The Takeaway

async functions return promises. await pauses the function and yields control to the caller. The rest of the function runs as a microtask when the awaited promise settles. await unwraps the promise (fulfilled value) or throws (rejection). This is why async functions do not block.