Event loop

As we know already, the JavaScript language is single-threaded. Long-running code on the main thread can block the thread; in the case of browsers, blocking the main thread means that browsers cannot respond to user interactions and cannot render changes on the UI. This is why the screen freezes when some long-running code blocks the main thread. In the case of NodeJs, in the context of application servers, blocking the main thread means that the server cannot handle the incoming HTTP requests until the main thread is unblocked.

To get around the limitation of a single thread where JavaScript code executes, as discussed in the previous lesson, any asynchronous operation is handled in the background, and in the meantime, the main thread can do other things.

Asynchronous operations like HTTP requests are handled by the browser in the background, and when the HTTP request is completed, our JavaScript code is executed using the callback we provided at the time of starting the HTTP request. The same is true for other asynchronous operations, like file handling in NodeJS. Every asynchronous operation in NodeJs is either handled by the internal thread pool of NodeJS or the operating system itself.

If we consider the main thread as the "JavaScript world", then the asynchronous operations actually happen outside the JavaScript world. Once the operation is completed, to get back into the JavaScript world, callbacks are used, which are invoked to execute the JavaScript code in response to the successful completion or failure of the operation.

So, in short, the code we write that executes on the main thread only initiates the asynchronous operation. Instead of waiting for the operation to complete, the main thread is free to do other things. The asynchronous operation is handled in the background by the environment in which our JavaScript code is executed. It can be a browser or a runtime like NodeJS. But how does the execution get back from the background to the main thread where our code is executed? This is where the event loop comes into the picture.

What is an event loop?#

The event loop in JavaScript is one of those concepts that is explained abstractly to make it easier for others to understand. This lesson will aim to create a solid understanding of the event loop.

The event loop helps to execute asynchronous operations in a non-blocking manner. When an asynchronous operation is completed in the background to execute the JavaScript callback that we provided at the time of initiating the asynchronous operation, it needs to be pushed onto the call stack.

The call stack is a stack data structure used to keep track of the currently executing code. Every function call is added to the stack as a stack frame. The frame is popped off the stack when the function execution ends.

Let us understand the event loop using the following code example:

console.log("after setTimeout");

You can run the code above in the Replit below: