Demystifying Javascript engine

Sumit Kumar
Jun 29 · 3 min read

Event Loop is in the core of Node.js, we all have listened this, let just explore how

We all listen Nodejs is single threaded and still manage to perform multiple tasks very easily, hows that possible?

Javascript doesn’t perform multiple task at once, instead it execute all task one by one, but due to its asynchronous nature it seems that it is executing multiple task at once.

Let just explore how javascript execute code

Javascript has one call stack under which all code is executed, as soon as the code enters the call-stack it starts executing that in no time and the javascript engine is so fast that it executes it instantly, But one question is still there, now we know that javascript has single call-stack and all code executes under that, then what about the code that takes time to execute like requesting data from external source, promise, setTimeout etc, so the answer of all those in our next diagram, let just explore the below diagram

Event Loop

The above diagram is a basic representation of how javascript engine looks like and also it explains how javascript executes the asynchronous task so fast.

In the above diagram we can see that there is one call-stack, one webAPI, one microtasks queue, one callback queue and one event loop. Now lets explore how it works:-

As soon as any code enters the call-stack javascript starts executing the code, but if there is any fetch, promise, setTimeout, eventHandlers found it code, javascript move those to the webAPI and registers the callback against them, as soon as the callback is ready to execute, it moves to the microtasks queue or callback queue which notifies event loop that these callbacks are ready to execute.

Eventloop work is to continuously monitor call-stack and microtasks queue and callback queue, so when eventloop finds that there is nothing to execute in the call-stack it moves the callback from microtasks queue or callback queue to call-stack and javascript executes those as soon as it is moved.

Now the question is what this hack microtask queue and callback queue is and why we have two queues instead of one?

Lets demystify those, microtasks queue can also be called as a priority queue, so all the task in the microtasks queue is executed first and when the microtasks queue is empty then only task from callback queue is moved to the call-stack to get executed.

Now what all task goes under microtasks queue?

Promise and Mutation Observer goes under microtasks queue and all other callback goes under callback queue.

Hope you find this post helpful in understanding the event loop and javascript engine a bit, Feel free to post your suggestions about this post, what you like and share your thoughts, so that others finds that useful!

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Sumit Kumar

Written by

Full Stack Javascript developer, here to talk about Problem Solving, React.js, Node.js & GraphQL

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.