Have you ever thought about how JavaScript works behind the scene?
Event loop, event loop, event loop. Most probably you may have heard these bullshit 2 piece words. But what’s the mystery hidden behind these two words? I have asked some of my friends who have completed a sweating journey. Well, though somehow they completed, the journey wasn’t much enjoyable to them. Why? They surprised me by saying that after attaining fundamental knowledge about JavaScript, they dived into frameworks. These may be React.js, Vue.js, Angular.js, or anything else.
So nowadays this is the common scenario we see oftentimes. So ultimately what happens. We become melancholy amidst learning frameworks. Then we have to stop learning frameworks?? No no merely not. What I want to say is to learn deeply about the language. We should have to have a good command of the language before learning frameworks. Today I am talking about how JavaScript works behind the scene because when I started learning JavaScript, it was a great riddle for me. How JavaScript works on the browser/ how the browser interacts with JavaScript which we can not see. These questions arise frequently in every fresher’s mind because most of us learn javascript for the sake of discovering web architecture, not only treating javascript as a programming language, but also applying js knowledge to build the web.
So we all know that JS is a single threaded, non-blocking programming language performs asynchronously. That sounds interesting but contains a deep sense. That seems very easy but actually not. Simply think about a browser. It loads lots of contents in the twinkling of an eye. Behind the scene there are tons of asynchronous tasks which we are not seeing. I have said single threaded. What does it mean??? You have already known that JS can perform one task at a time. It has only one stack and one heap per process. Hence, if any other program wants to execute something, it has to wait until the previous program is completely executed. Just simply think about it, if browser performs like this way, while loading something, user experience will be horrible, right?
This is just a simple example. So how browser handle this task? If you run the code in browser’s console, you will see VM just right of your code. What is this? You may have ignored this. Have you thought about this?
So this is the technology browser applies to handle tons of tons asynchronous tasks. Chrome developed this. Basically this is the backbone of Google Chrome. It directly converts scripts to machine code without producing intermediate code. Surprisingly, JS doesn’t have any sense about that. V8 engine is written in C/ C++. You are using node.js. This is also written in C/ C++(at first I did not believe that). All the tasks are controlled by Web API but they are not the part of JS and they functions asynchronously. So lets get back to our example to realize how JS ineracts with Web API.
In our example we set the call back function which will further return “Hello lovely girl!” to a setTimeout. That means we have delayed the second execution by 2 seconds. First “Hello World!” will be executed. Then the call back function starts executing and hits setTimeout API call, JS will pass the call back function to the Web API and will move to the following line. When all the functions in the program is done executing, honestly saying when the call stack becomes empty, “Hello lovely girl!” will be returned. The function will remain in the call back queue until the stack becomes empty. And the call back queue or sometimes said event queue is part of the JS engine. Node.js performs similar just like Web API because it also uses Google’s V8 engine.
