How javascript works?

How javascript works?

If you are a front end developer,It is must to know that how javascript works? Most of the time this concept is asked in another way like “How javascript is a single threaded language.” So this is something we are going to look in this article.

So let assume we have one javascript file with us. And we want to execute this javascript file into the browser. Lets see the  below communication –

Javascript File says to Browser : Hey, I am javascript file. Can you help me to execute?
Browser says to Javascript File : I don’t understand what are you saying?

What is happening here? Why are we not able to execute javascript file directly inside the browser. Its because there is something in between them. And that is called “Javascript Engine(V8)”. This javascript engine is there in every browser. And there can be different javascript engine in every browser. So let see how javascript works?

What does Javascript Engine(V8) do?

Its basically going to take the javascript code and convert it into machine readable code. And machine readable code is basically bits which is zeros(0) and ones(1) thats what our computer .understands. And this javascript engine is also written in some other language. For Example : For chrome V8 is written in C and C++.

Now lets understand whats actually inside this javascript engine.

Let see this is a javascript engine. Inside this there are two main things which we need to understand.
1. Memory Heap
2. Call Stack

Memory Heap: As you can see in the diagram we are assigning a value 10 in a variable or constant x. So we need to store this value somewhere right? Thats where this memory heap comes to the picture. Anything which needs to be stores and has some value will be actually stored inside the memory heap. This memory heap has some limited space. There is no infinite space inside this. Therefore if you keep declaring variables and don’t use them or you don’t clear them. Then you will get the memory leaks.

Thats why we always says that global variables are bad because they remains throughout the execution of your program. Thats why there is chances to get the memory leak if you will declare the global variable.

Call Stack: Whenever you have anything to execute or any line of code will be execute in call stack. For example you can see in the diagram console.log(5) is written. If you want to execute this code , firstly this code will come inside the call stack and it will be executed. After execution it will be popped off from call stack. Inside call stack you can execute only one line of code at a time. And thats why we called that “Javascript is a single threaded language”.

You cant have multiple statement executing at the same time. But some times there may the questions that why Javascript is not multi threaded. Well, there may be chances of deadlock and we have only one call stack that why for simplicity its single threaded.

Conclusion : 

I hope it will be clear now that how javascript works? Now there might have another query that if javascript has only one call stack then how AJAX or asynchronous javascript will work. Because asynchronous code executes in parallel and it does not wait for the previous operations to be completed. So in case of asynchronous javascript , that particular code will executed in background.

So in the next article we will look how asynchronous javascript code is executed in V8 engine. There will be all details about the asynchronous javascript and its working principle. Also in short we can see that what is stack , web API , callback queue and event loop.