If you’ve ever found yourself wondering why your console.log doesn’t fire when you expect it to, or why a setTimeout with 0ms delay doesn’t execute immediately, you’re not alone. The answer lies in the core mechanism that drives JavaScript’s concurrency model: the JavaScript Event Loop.

Let’s break it down in a simple way so you can truly understand what’s going on behind the scenes.

JavaScript is Single-Threaded

Before diving into the event loop, you need to know that JavaScript is single-threaded. This means it can do one thing at a time. Unlike some languages that can run multiple threads in parallel, JavaScript uses one thread to execute all your code.

So how does it handle things like API requests, timers, or user events without freezing your page? That’s where the JavaScript Event Loop steps in.

Call Stack: The Task Queue’s First Stop

At the core of JavaScript execution is the call stack. It works like a stack of dishes: last in, first out (LIFO).

When you call a function, it’s pushed onto the stack. Once it finishes, it’s popped off. If a function calls another function, that new one goes on top of the stack.

function greet() {
  console.log('Hello');
}

greet(); // 'Hello' is logged immediately

Here, greet() is pushed to the stack, executed, and popped off.

But what about asynchronous functions?

Web APIs: Handling the Async Work

When you use functions like setTimeout, fetch, or DOM events, they don’t run in the call stack. Instead, they’re passed to the Web APIs provided by the browser (not JavaScript itself).

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);
console.log('End');

Output:

Start
End
Timeout

Why doesn’t ‘Timeout’ appear immediately? Even though we used a 0ms delay, setTimeout hands the task off to the browser. The browser waits, then sends the callback to a queue.

Task Queue: Waiting for the Stack to Clear

Once the callback is ready, it goes into the task queue (sometimes called the callback queue). But it won’t run until the call stack is empty.

So in the example above:

• ‘Start’ is logged.
• setTimeout is passed to Web API.
• ‘End’ is logged.
• Then, and only then, the callback in setTimeout runs.

The JavaScript Event Loop in Action

This is where the JavaScript Event Loop shines. Its job is to:

1. Check if the call stack is empty.
2. If yes, look into the task queue.
3. If there’s something there, push it onto the stack.

And this cycle repeats over and over.

That’s how JavaScript can be single-threaded but still handle asynchronous tasks efficiently.

Microtasks vs Macrotasks

There are actually two kinds of queues:

• Macrotask Queue: Includes setTimeout, setInterval, setImmediate, etc.
• Microtask Queue: Includes Promise.then, catch, finally, and queueMicrotask.

Microtasks are given priority.

console.log('Start');

Promise.resolve().then(() => {
  console.log('Microtask');
});
setTimeout(() => {
  console.log('Macrotask');
}, 0);
console.log('End');

Output:

Start
End
Microtask
Macrotask

Why? Because the event loop checks the microtask queue right after the call stack clears, before moving on to the macrotask queue.

Real-World Use: Why It Matters

Understanding the JavaScript Event Loop helps you:

• Avoid blocking code.
• Debug async issues.
• Optimize performance.

For example, if you need to run something after rendering but before a timeout, using a microtask (Promise) might be a better choice than setTimeout.

Conclusion

The JavaScript Event Loop isn’t some mystical black box. It’s a clever scheduling system that allows single-threaded JavaScript to juggle multiple tasks efficiently.

Once you understand how the call stack, Web APIs, task queues, and the event loop interact, a lot of confusing JavaScript behavior starts to make sense.

TL;DR:

• JavaScript is single-threaded.
• Async work is handled by browser APIs.
• The event loop checks for tasks to run after the stack clears.
• Microtasks run before macrotasks.

Keep this in mind next time you’re debugging async code or wondering why your log statements aren’t in the order you expected.

Understanding the JavaScript Event Loop is a key step to writing better, faster, and more predictable JavaScript code.