Demystifying the JavaScript Event Loop

If you’ve been working with JavaScript for a while, you know it’s single-threaded. This means it can only do one thing at a time. But if that’s true, how does it handle things like API requests or timers without freezing the entire browser?

Enter the Event Loop.

---

How It Works (In a Nutshell)

Think of JavaScript as a busy chef in a kitchen. Instead of waiting around for the water to boil, the chef starts chopping vegetables and asks an assistant (the browser/Web APIs) to yell when the water is ready.

Here is the basic order of operations:

1. The Call Stack: Where your synchronous code lives. Functions get pushed in, executed, and popped out.
2. Web APIs: When you call something async (like fetch or setTimeout), JavaScript hands it off to the browser to handle in the background.
3. The Callback Queue: Once the background task is done, it waits here in a line.
4. The Event Loop: This is the traffic cop. It constantly checks if the Call Stack is empty. If it is, it grabs the first task from the Callback Queue and pushes it onto the stack to be executed.

A Quick Code Example

Predict what order these logs will print in:

console.log("A - Start");

setTimeout(() => {
  console.log("B - Inside Timeout");
}, 0);

console.log("C - End");