How java script code runs?

To answer this question first we need to remember that the way people communicate with each other by some specific language, computer has also its specific way of communication by a language that is called machine language. When we write any code and in the execution time when the browser gets that code browser needs to convert the code into computer language. Now the question is how browser actually converts our code to machine language? Browser converts code to machine language by using JavaScript engine. V8, Spidermonkey, chakra, JavaScriptCore (also called nitro) are the name of some JavaScript engines used by chrome, firefox, safari, edge respectively.

So, we can say that when browser gets any code, it gives the code to the JavaScript engine, then the JavaScript engine converts those code into computer language, then finally computer understands the code and we can seen the output in display.

We have got a general overview how code executions happen. Now the next question is how does the javascript engine compile the code to machine language? Before answering this question, let’s go through the process of converting the code into machine language . Code conversion happens by 3 ways:

1. Interpretation
2. Compilation
3. Mixed

In case of interpretation, the Interpreter translates just one statement of the program at a time into machine code. It is a slow but easily debuggable. On the other hand compiler scans the entire programme and translate the whole of it then execution happens. This is a fast but hard to debug process. First javascript was interpreted language. In 2008, google chrome launched their amazing v8 engine by combining the two process (interpretation, compilation) and named it Just-in-Time compiler (JIT) where fastness of compilation and easy debugging feature of interpretation are combined. Now the question is how does JIT compiler work? In JIT compiler the JIT part does the work of interpretation and compiler part does the work of convention of code to machine language. When we call any function the JIT compiler at the specific time converts the function to machine code and do execution. So, when we call any function if there is any error JIT can detect the error just in that time and can give that message to the programmer that has made the debugging easy. So we can sum up that, by this process code has been easy to debug and at the same time fast enough to be executed.

Now we have the concept how JavaScript engine works. Now the code executions will be easier to understand. When JavaScript engine get the codes, it break the codes into some small pieces in the execution period and does the execution, that small part is called execution context.

In javascript execution there are two execution context.

1)Global Execution context .

2) Function Execution context.

In every context there are two phases. Loading phase, execution Phase. In loading phase 4 things happen :

1. global object creation
2. this object creation that actually points the global object.
3. memory allocation for variable and function.
4. the value of variable is assigned as undefined.

In the execution phase the undefined values in variable are replaced by the given values and the function remains as it is. Functions are only executed (by function execution context) when they are called.

Again in function execution context 4 things happen like global execution but in this case in stead of global object creation, parameter or arguments object creation happens and the rest are same like global execution context. The function execution context is only created when the function is called in the global execution context.

To sum up, simply the whole process is : In code execution first global execution context creation happen that has two phase one is loading and another is execution phase. In loading phase has four steps window object creation, this object creation, memory allocation of the variable and functions and finally the values of the variables are assigned as undefined. Then in the execution phase the variables are assigned the given values.In this execution phase if there is any function I mean if any function is called, functional execution context is created that follows the same process like global execution context but there is a one difference that is here parameter or argument object is created in stead of global object. By this way the whole execution happens and we see the output😃👏.

We know in javascript we use a lot of functions including nested function. We already know that first global object is created and inside it when we call a function another object is created inside the global object again if we have any nested function then there will be another object inside that object and it will be continued 🥺. Now the next question is in case of execution, what data structure is followed🤔🤔🤔.The answer is it follows the stack data structure that means Last In First Out (LIFO)…..

Thank you for reading this article. I know If you are new in javascript, it will be really tough for you to understand all the terms and the full process hundred percent but i think you have got some ideas. I could make you understand if i would make a video on it because there it would be possible for me to explain it by the help of drawing, animations and some other things. This article is actually for those people who have understood the whole process before but have forgotten some terms and information. Anyway, thank you so very much as you have read the article from first to last with your patience…..