Understanding the Event Loop in JavaScript — Made Simple!

JavaScript is one of the most popular programming languages, powering around 90% of websites on the web! But, one of the trickiest and most misunderstood concepts is how the event loop works. Here is an easy explanation for event loop, task queue, call stack, microtask queue, and web APIs.

What Makes JavaScript Special?

JavaScript is a single-threaded language. This means it processes one thing at a time, unlike languages like C++ or Go, which can handle multiple things concurrently. To make asynchronous tasks like fetching data or running timers work smoothly, JavaScript uses something called the event loop!

1. What Are Web APIs?

Web APIs are extra tools provided by the browser or Node.js to handle tasks like making network requests (using fetch), setting timers (setTimeout), or accessing user location (using the Geolocation API). These tasks run outside the main JavaScript thread.

Example:

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

Here, the browser handles the timer while the main JavaScript continues running other code.

2. What is the Task Queue?

The Task Queue is where callback functions from Web APIs, event listeners, and other deferred actions wait until JavaScript is ready to run them. These tasks wait their turn in line.

Think of it like a waiting line at a store, each task gets processed by the event loop when JavaScript is done with the current task.

3. What is the Call Stack?

The Call Stack is where JavaScript keeps track of function calls. When you call a function, it gets pushed onto the stack. When it finishes, it’s popped off. JavaScript processes tasks in the order they appear in the stack, it’s synchronous by nature.

4. What is the Event Loop?

The Event Loop is like a traffic officer that keeps everything moving. It constantly checks whether the call stack is empty, and if it is, it moves tasks from the task queue or microtask queue to the stack for execution. This is what lets JavaScript handle asynchronous code without blocking the main thread.

Example of Event Loop in Action

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

What happens here?

Let’s break it down:

1. "End" is logged immediately since it's synchronous and runs in the call stack.
2. The setTimeout with 100ms is handled by the Web API. After 100ms, its callback moves to the task queue.
3. The setTimeout with 2000ms does the same, but its callback moves to the task queue after 2000ms.
4. The event loop moves the 100ms callback to the call stack first, then the 2000ms callback.

5. What is the Microtask Queue?

The Microtask Queue is a special queue for tasks that are processed before the task queue. Microtasks come from things like Promises or mutation observers. The event loop always checks the microtask queue before the task queue.

Microtask Example with Promise

console.log("Start");

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

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

What happens here?

1. "Start" is logged immediately.
2. The setTimeout callback is placed in the task queue.
3. The Promise resolution is placed in the microtask queue.
4. "End" is logged.
5. The event loop checks the microtask queue, executes the Promise callback.
6. Finally, the task queue processes the setTimeout callback.

Output:

Start
End
Promise
Timeout

Visual Representation

Wrapping It All Up

Here’s how everything fits together:

1. Web APIs handle async tasks like timers outside the main thread.
2. The Event Loop moves tasks from the Task Queue or Microtask Queue to the Call Stack.
3. Microtasks (like promises) are handled first, before tasks in the Task Queue.