How JavaScript Handles Asynchronous Operations

How JavaScript Handles Asynchronous Operations

JavaScript is synchronous and single-threaded. Yet it handles async operations (timers, network, events) efficiently. Here is the full mechanism.

The Core Truth

The JS engine itself is synchronous. It has one call stack and runs one statement at a time. Async behavior comes from the runtime environment (browser or Node.js), not the language.

The Mechanism

1. Synchronous code runs on the call stack.
2. Async operations are handed to Web APIs (browser) or libuv (Node.js):
   • setTimeout(cb, 1000) → the Web API starts a timer.
   • fetch(url) → the Web API starts a network request.
   • button.addEventListener("click", cb) → the Web API waits for a click.
3. The engine continues running synchronous code (it does not wait).
4. When the async operation completes, the callback is pushed to a queue:
   • Promise callbacks → microtask queue.
   • setTimeout, events, I/O → macrotask queue.
5. The event loop moves callbacks to the call stack when the stack is empty:
   • Drain all microtasks first.
   • Then take one macrotask.
   • Repeat.

Example Walkthrough

console.log("start");
setTimeout(() => console.log("timer"), 0);
fetch("/api").then((data) => console.log("fetch"));
console.log("end");
``
1. `"start"` logs (stack).
2. `setTimeout` hands the timer to a Web API. The engine continues.
3. `fetch` hands the request to a Web API. The engine continues.
4. `"end"` logs (stack).
5. Stack is empty.
6. If the fetch resolved, its callback goes to the microtask queue → runs.
7. The timer callback (macrotask) runs next.
8. Output depends on which completes first: `start, end, fetch/timer`.

### What Makes JS "Async"

- **Web APIs**: the browser/node provides async operations that run outside the engine.
- **Queues**: callbacks are stored until the stack is empty.
- **Event loop**: moves callbacks from queues to the stack.

Without these, JS would block on every network request and timer.

### The Takeaway

JS is synchronous at the language level. Async behavior comes from the runtime: Web APIs handle the work outside the engine, queues store callbacks, and the event loop moves callbacks to the stack when it is empty. This allows JS to handle async without blocking.