Asynchronous JavaScript

JavaScript is single-threaded — it can execute only one piece of code at a time. Yet web applications constantly perform tasks that take time: fetching data from APIs, reading files, waiting for user input, and running timers. Asynchronous programming lets JavaScript handle these tasks without freezing the page.

---

The Problem: Blocking Code

If JavaScript ran everything synchronously, a network request taking 3 seconds would freeze the entire page for 3 seconds — no scrolling, no clicking, no animations. Asynchronous code solves this by starting a task, moving on, and handling the result when it is ready.

---

The Event Loop

JavaScript's concurrency model relies on the event loop:

1. Call stack — where the current function executes.
2. Web APIs — the browser handles timers, network requests, and DOM events outside the call stack.
3. Task queue (macrotask queue) — completed callbacks wait here.
4. Microtask queue — promise callbacks (.then, .catch) go here (higher priority than macrotasks).
5. Event loop — continuously checks: "Is the call stack empty? If yes, move the next task from the queue to the stack."