Table of contents

What is an Event Loop in JavaScript ?

In the world of JavaScript, one of the most fundamental concepts that every developer must understand is the event loop. JavaScript is a single-threaded language, which means it can only perform one task at a time. However, modern web applications often require the ability to perform multiple tasks, such as handling user input, making network requests, and updating the UI, seemingly at the same time. This is where the event loop comes into play. It allows JavaScript to perform non-blocking, asynchronous operations despite its single-threaded nature.

What is the Event Loop?

The event loop is a core component of JavaScript's runtime model, responsible for managing the execution of code, collecting and processing events, and executing queued tasks.

JavaScript is single-threaded, which means it can only execute one piece of code at a time. However, it often needs to perform tasks that take time, such as making network requests or reading files from disk. The event loop allows JavaScript to perform these time-consuming tasks asynchronously, without blocking the main thread.

The event loop achieves this by managing two key elements:

  • Call Stack: Where function executions are placed in order to be processed.
  • Callback Queue (or Task Queue): Where asynchronous tasks wait to be added to the call stack for execution once the stack is clear.

How Does the Event Loop Work?

Call Stac

  • The call stack is where your code gets pushed when a function is invoked. It follows the LIFO (Last In, First Out) principle, meaning the last function pushed to the stack is the first one to be executed.
  • When you call a function, it's pushed to the top of the stack. When the function returns a result or finishes, it is popped off the stack.
  • JavaScript can only perform one operation at a time because it only has one call stack.

Web APIs (in browser environments)

  • Some functions in JavaScript, like setTimeout, fetch, or event listeners, are asynchronous. These functions don't block the main thread. Instead, they're offloaded to the browser's Web APIs.
  • The Web APIs handle tasks such as making HTTP requests, handling timers, or responding to user inputs without blocking the main thread.

Callback Queue

  • Once an asynchronous task (such as an HTTP request) completes, the Web API moves the associated callback function to the callback queue.
  • The callback queue is where the event loop picks tasks to move back to the call stack for execution when the stack is empty.

Event Loop

  • The event loop constantly monitors the call stack and the callback queue. If the call stack is empty, it will push a function from the callback queue to the call stack for execution.

Event Loop Cycle

  • The event loop checks if the call stack is empty.
  • If the call stack is empty and there are tasks in the callback queue, it moves the first task from the callback queue to the call stack.
  • The task is executed, and the event loop continues this process.

Example of Event Loop in Action

Let's look at a simple example to see how the event loop behaves with both synchronous and asynchronous code:

javascript
console.log("Start");  // Step 1
setTimeout(() => {
 console.log("Inside setTimeout");  // Step 5
}, 2000);
console.log("End");  // Step 2

Explanation

  • Step 1: "Start" is logged to the console immediately because it's a synchronous operation.
  • Step 2: setTimeout is an asynchronous function. It offloads its callback to the Web API (in this case, with a delay of 2000ms) and continues executing the remaining synchronous code. It does not block the call stack.
  • Step 3: "End" is logged to the console because it's synchronous.
  • Step 4: Once the setTimeout delay of 2000ms is over, the callback function (console.log("Inside setTimeout")) is pushed to the callback queue.
  • Step 5: When the call stack is empty, the event loop pushes the setTimeout callback to the call stack, and "Inside setTimeout" is logged to the console.

Output:

plaintext
Start
End
Inside setTimeout

Asynchronous Example with Promises

Promises are another important feature in JavaScript that allows us to handle asynchronous operations. Let's see how promises interact with the event loop.

javascript
console.log("Start");
setTimeout(() => {
 console.log("Inside setTimeout");
}, 0);
Promise.resolve().then(() => {
 console.log("Inside Promise");
});
console.log("End");

Explanation:

  • Synchronous code (like console.log("Start") and console.log("End")) is executed first.
  • setTimeout with a delay of 0 is asynchronous and its callback is added to the callback queue.
  • Promise is also asynchronous, but its .then() handler goes into a special microtask queue. Microtasks have higher priority than normal tasks (like setTimeout), meaning they are executed before any tasks in the callback queue, even if the delay is 0.

Output:

plaintext
Start
End
Inside Promise
Inside setTimeout

Event Loop and Microtasks

There are two types of task queues in JavaScript:

  • Macro Task Queue (e.g., setTimeout, setInterval).
  • Micro Task Queue (e.g., Promises, process.nextTick).

The event loop first checks the microtask queue before handling tasks in the macro task queue. This means that promises and other microtasks are executed before any setTimeout or other macro tasks.

Here’s an example demonstrating the priority of microtasks:

javascript
console.log("Start");
setTimeout(() => {
 console.log("setTimeout");
}, 0);
Promise.resolve().then(() => {
 console.log("Promise");
});
console.log("End");

Output:

plaintext
Start
End
Promise
setTimeout

Real-World Use Cases of the Event Loop

  • User Interaction: When a user clicks a button on a webpage, JavaScript offloads the task to handle that click event using the event loop. The event is processed asynchronously, preventing the UI from freezing while waiting for the user action.
  • AJAX Requests: When you make HTTP requests in JavaScript using fetch or XMLHttpRequest, the event loop allows the request to be made asynchronously while continuing to execute other code.
  • Animation: The event loop helps manage animation frames by ensuring that the browser can repaint frames while handling other events like user input.

JavaScript

Related Articles