What is the JavaScript Event Loop?

JavaScript is a single-threaded language, which means it can do one thing at a time. But it handles asynchronous tasks (like timers, API calls, or DOM events) efficiently. How? Thanks to the event loop.

Why the Event Loop Exists

JavaScript runs in an environment (like a browser or Node.js) that includes a call stack, a Web API (in browsers), a task queue (also called a callback queue), and the event loop to coordinate everything.

How It Works

1. JavaScript runs code line by line on the call stack.
2. When it hits an asynchronous task (like setTimeout), that task is sent to the browser’s Web API.
3. After completion, the callback for that task is placed in the task queue.
4. The event loop constantly checks: if the call stack is empty, it takes the first function from the task queue and pushes it onto the call stack.

Example: setTimeout and Event Loop

console.log('Start');

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

console.log('End');

Output:

Start
End
Inside setTimeout

Even with a 0ms delay, setTimeout runs after the synchronous code because its callback waits in the task queue.

Visual Breakdown

• Call Stack: Executes current JavaScript code.
• Web API: Handles timers, fetch calls, etc.
• Task Queue: Stores callbacks for execution.
• Event Loop: Bridges the call stack and the task queue.

Microtasks vs Macrotasks

JavaScript also has a microtask queue (e.g., for Promises), which gets priority over the task queue (macrotasks).

console.log('Start');

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

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

console.log('End');

Output:

Start
End
Microtask
Macrotask

Why It Matters

• Understanding the event loop helps avoid bugs in asynchronous code.
• It explains why some code executes later even if it looks like it should run right away.
• It’s essential for writing efficient and non-blocking code.