How is javascript code executed?

Javascript code will be executed in two phases whenever we try to run a javascript program. And in the first phase, the JS engine skims through all the code and assigns memory to all the variables and functions(functions definitions only not the functions expressions or arrow functions) inside the code. In the second phase, the JS engine starts interpreting the code line by line and it moves to the next line of execution when it is done with the current line as javascript is synchronous. In the first phase, code gets compiled and the same code gets interpreted in the second phase of execution.

The first phase(memory creation phase) and the second phase(code execution phase) of javascript code execution will be done inside the execution context and this execution context gets created when we run the program.

When we try to run the above program, At first, an execution context will be created and memory will be allocated for all the variables ( personName, age) and functions definitions(isEligibleToVote). Whenever memory is allocated to these variables, the javascript engine assigns undefined as a placeholder value for all of those variables & assigns all the functional code to the function name.

This is the reason why we can access variables & functions (functions definitions) before encountering their actual declarations. Let us see this in action. In the below example, we are trying to print(console.log) the variables(personName, age) before their actual declarations. But still, we can access them unlike in any other programming language because those variables were already available (this availability is also known as Hoisting) in the execution context's memory component but their value is undefined because the 2nd phase of execution didn't execute the line corresponding to those variables yet.

Now, let us understand the second phase of code execution where the javascript code gets executed line by line in the execution context by the call stack & variables present in the memory component will be initialised with the corresponding values provided in the code. The below snippet shows the state of the memory component when line number 1 of the code gets executed by the call stack. Here variable's(personName) value gets initialised in the memory component.

And the same way when control goes to line number 2 of the code & when it gets executed, the corresponding variable(age) gets initialized with the value 22.

Now if we try to print(console.log) the variables after line number 5, we can able to see their values getting reflected in the console as those were already initialised in the execution context.

In the same way, we can invoke the function before its declaration.

So, this is how javascript code gets executed in the execution context by the call stack in two phases. Where the first phase allocates memory to variables and functions & in the second phase actual code gets executed line by line.

Please reach out to Siva Rajana in case of any doubts or suggestions.

Thanks for reading.

Happy Coding!!

#javascript #reactjs #webdevelopers #divami #frontend #uideveloper