Understanding the JavaScript Event Loop: A Deep Dive

5 min readDec 16, 2023

JavaScript, as a single-threaded, non-blocking, asynchronous language, relies heavily on an essential concept known as the event loop. The event loop plays a crucial role in handling asynchronous operations efficiently, making JavaScript suitable for various applications, from web development to server-side programming.

In this article, we will delve into the details of the JavaScript event loop, exploring its components, functions, and its pivotal role in managing concurrency.

The Basics of Asynchronous Programming

Before delving into the event loop, it’s crucial to understand the basics of asynchronous programming. JavaScript executes code in a single thread, meaning it processes one operation at a time. However, many tasks, such as fetching data from an external server or handling user input, are inherently asynchronous, meaning they don’t necessarily complete immediately.

To manage these asynchronous tasks effectively without blocking the main thread, JavaScript employs mechanisms like callbacks, promises, and async/await. Asynchronous operations allow the program to continue executing other tasks while waiting for non-blocking operations to complete.

The Call Stack

The call stack is a fundamental component of the JavaScript runtime environment. It keeps track of function calls in a Last In, First Out (LIFO) manner. When a function is called, a new frame is added to the top of the stack, and when a function completes, its frame is removed.

If a function takes a long time to execute, you cannot interact with the web browser during the function’s execution because the page hangs.

A function that takes a long time to complete is called a blocking function. Technically, a blocking function blocks all the interactions on the webpage, such as mouse clicks.

An example of a blocking function is a function that calls an API from a remote server.

The following example uses a big loop to simulate a blocking function:

function task(message) {
    // emulate time consuming task
    let n = 10000000000;
    while (n > 0){
        n--;
    }
    console.log(message);
}

console.log('Start script...');
task('Call an API');
console.log('Done!'

In this example, we have a big while loop inside the task() function that emulates a time-consuming task. The task() function is a blocking function.

The script hangs for a few seconds (depending on how fast the computer is) and issues the following output:

output: 
Start script...
Download a file.
Done!

To execute the script, the JavaScript engine places the first call console.log() on top of the call stack and executes it. Then, it places the task() function on top of the call stack and executes the function.

However, it’ll take a while to complete the task() function. Therefore, you’ll see the message 'Call an API' a little time later. After the task() function completes, the JavaScript engine pops it off the call stack.

Finally, the JavaScript engine places the last call to the console.log('Done!') function and executes it, which will be very fast.

Callbacks to the rescue

To prevent a blocking function from blocking other activities, you typically put it in a callback function for execution later. For example:

console.log('Start script...');

setTimeout(() => {
    task('Download a file.');
}, 1000);

console.log('Done!');

In this example, you’ll see the message 'Start script...' and 'Done!' immediately. And after that, you’ll see the message 'Download a file'.

Here’s the output:

Start script...
Done!
Download a file.

As previously noted, the JavaScript engine is capable of executing only one task at a time. However, it is more accurate to state that the JavaScript runtime is restricted to performing one task sequentially.

When you call the setTimeout() function, make a fetch request, or click a button, the web browser can do these activities concurrently and asynchronously.

The setTimeout(), fetch requests and DOM events are parts of the Web APIs of the web browser.

In our example, when calling the setTimeout() function, the JavaScript engine places it on the call stack, and the Web API creates a timer that expires in 1 second.

Then JavaScript engine places the task() function into a queue called a callback queue or a task queue:

The event loop is a constantly running process that monitors both the callback queue and the call stack.

If the call stack is not empty, the event loop waits until it is empty and places the next function from the callback queue to the call stack. If the callback queue is empty, nothing will happen:

The Event Loop

The event loop is the orchestrator that ties the call stack, Callback Queue, and Web APIs together. Its primary role is to constantly check whether the call stack is empty. If it is, the event loop takes the first function from the Callback Queue and pushes it onto the call stack for execution.

Let’s examine the event loop’s sequence:

Check the Call Stack: Is it empty?
If Yes: Move a function from the Callback Queue to the Call Stack.
If No: Keep checking.

This continuous process ensures that even though JavaScript is single-threaded, it efficiently handles asynchronous operations without blocking the main thread.

Consider the following code:

console.log('Start');

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

console.log('End');

In this example, the console.log('Start') and console.log('End') statements are executed immediately, while the setTimeout function is pushed to the Web API environment. After the specified timeout (even if it's 0 milliseconds), the callback function inside setTimeout is placed in the Callback Queue.

The event loop then checks if the call stack is empty, finds it empty after executing the initial log statements, and proceeds to push the setTimeout callback onto the call stack, resulting in the 'Inside setTimeout' message being logged.

Conclusion

In conclusion, the event loop is the heart of asynchronous JavaScript, allowing the language to efficiently handle concurrent operations without resorting to multi-threading. By coordinating the call stack, Callback Queue, and Microtask Queue, the event loop ensures that JavaScript remains responsive and can handle tasks such as user input, network requests, and timers seamlessly.

Understanding the event loop is essential for developers working with JavaScript, as it provides insights into how the language manages concurrency and helps in writing more efficient, responsive, and scalable applications.