What is Event Loop in JavaScript

In this blog, we are going to discuss the event loop in JavaScript.

JavaScript is a single-threaded programming language and has the asynchronous behavior which is not the part of JavaScript rather they achieved using the browser API.

Heap: Heap is the region where the objects are allocated an unstructured region of memory.

Stack: It represents the single thread which is used for JavaScript code execution where the stack of frames created by function calls.

Browser or Web API: It is used to expose data from the browser and it is built in. It does not include in the JavaScript language but rather build on top of the JavaScript core. Some useful API's provided is the Geolocation API.

When we see JavaScript is a single-threaded then it means that the main thread in which the JavaScript code executes runs one code in one line at time manner where there is no possibility that processes can be done in parallel.

For example, let's take this example below which takes suppose 5 seconds as input and it will block the JavaScript main thread for 5 seconds and this we call it Blocking Code:

            function delayBySeconds(sec) {
                let start = now = Date.now();
                while(now - start < (sec * 1000)) {
                    now = Date.now();
                }
            }    
        

How to handle Async Stuff in JavaScript:

Three are a number of ways which we can handle Async programming in JavaScript which are callbacks, promises, and async-await keyword.

This the brief explanation of Async behavior of JavaScript and how to handle it. Now, let's talk about the event loop in JavaScript.

Let's take the below line of code:

            function getDetails() {
                var name = 'Ankit Uniyal';
                setTimeout(function(){ callAnotherFn(); }, 3000);
                callsecondFn();
            }    
        

Suppose, I am calling the getDetails function from the main function. Since JavaScript is single threaded so it will keep executing line by line code and once it finds out the setTimeout function call. It will then call the setTimeout function of the browser as setTimeout is not the part of JavaScript, it's part of the browser.

Now, setTimeout is called but it will not execute on the main thread of the JavaScript rather internally in the JavaScript. Now, on the next line callsecondFn called, then it will come to the top of the call stack and keep executing.

Now, in between setTimeout execution completes, now it will try to push the callback function (which is callAnotherFn but currently, another function is on top of the stack so instead of pushing it on top of the stack, it adds on the callback queue.

Now, the callback queue keep checking the status of callback stack to fund out it is empty or not on every regular interval and once it finds out that it is empty now then callback queue push callanotherFn to the callback stack.

So, the process of checking the empty status of callback stack from the callback queue is known as event loop in JavaScript.

Hope this helps out.

Thanks.