×
☰
How JavaScript works under the hood
The most common question we come across is — Is JavaScript Synchronous or Asynchronous? Most people are ready with the answer yes, JavaScript is a Synchronous language and acts asynchronously, though when the second question arises — How does JavaScript work asynchronously? Many people fail to give a proper explanation for this. The answer to that question is through the concept of Event Loop. Let’sunderstand Event Loop and how Event Loop works.
The basic architecture of Event Loop
Lets understand each part of the event loop first before diving into how the event loop works.
Heap is a storage space in the memory where the objects are stored when the user defines a variable.
The call stack is nothing but a stack data structure that works in the LIFO format that is Last in First out. Let’s have a better understanding of what is a call stack and how it works.
Blogs
function human(){
console.log("Inside human function");
}function animal(){
human();
console.log("Inside animal function");
}animal();
Excited to know how the above code works?
As we can see from the above example, first animal() enters the stack and which then calls the human() function. The output for the example will be:
Inside human function
Inside animal function
This is a simple example of how JavaScript works synchronously.
Let’s assume there is a blocking code in the call stack like having a long for loop or an API call. The call stack will perform that operation while the other functions that are in the stack or that need to be pushed in the stack will be blocked.
For example — if there is a for loop from 0 to 1 million, the call stack will implement the call stack first and will block the other operations till the for loop is executed. To avoid such scenarios, we have Web API. The Web API handles the blocking codes in the call stack separately so that the call stack is not blocked. Also, note that for back-end purposes, we have c++ APIs instead of Web APIs like in NodeJs.
The callback queue is again nothing but the queue data structure that follows First-in First-out (FIFO). Whenever a function or code that has already executed in the Web API, it passes that to the callback queue which then, later on, pushes the function to the call stack when the call stack is clear to print the output of that function.
How does the Event Loop works?
To explain the working of the event loop let’s take a small example and see how the code is executed.
function eventLoopExample(){
console.log("First console");
setTimeout(function(){console.log("Second console")}, 0);
console.log("Third console");
}eventLoopExample();
Take some time to guess the output of the above function before checking the answer below.
As we saw the output above, we all may have wondered how we got the Second console at last, the answer is through Event Loop. As we discussed above the eventLoopExample() will enter the stack followed by the first console. The call stack then returns the output for the first console and pushes the third line which is setTimeout() which then enters the call stack and as this is an async function this is sent to the Web API which then executes the function and sends the function to the callback queue after execution. Parallel to this, the call stack will push the third console in the stack which is executed and the output is returned. Then once the call stack is empty/clear, the second console which is present in the queue is then pushed to the call stack which then returns the output.
The last question that few of us will have, is that the time in setTimeout() was given as 0 which means that the setTimeout should have been executed immediately in the call stack, still it is consoled at last why? The reason behind this is that being an asynchronous function setTimeout() will always be sent to the Web API and so the callback queue. Although the callback queue has already executed the setTimeout()it still waits for the stack to be cleared. By default, the callback queue is always checked after every 10ms if the functions present inside have completed the execution or not.
Conclusion
Even though this is a very basic introduction to how JavaScript works asynchronously, we still have got a clear understanding of how JavaScript works under the hood. It’s just a cycle from call stack to Web API and from Web APIs to callback queue and at last from callback queue to call stack.
To learn more about how JavaScript works under the hood, I will strongly recommend checking this video by Philip Roberts
https://youtu.be/8aGhZQkoFbQ
Source: Medium
