How JavaScript works and code is executed behind the scene ?

JavaScript is an interesting language in the world and its working procedure quite be different from other languages. JavaScript is synchronous(specific order of execution), single-threaded language(it means JavaScript can only execute one command at a time). 

Everything in JavaScript happens insides an EXECUTION CONTEXT, which you can assume to be a big box or a container in which whole JavaScript code is executed. The EXECUTION CONTEXT contains two parts one is Memory(Variable Environment), where all the variables and functions store key: value pair and the other is Code Component(Thread of Execution), where code is executed one line at a time(pictorial representation shown in below). 

PICTORIAL REPRESENTATION OF EXECUTION CONTEXT

Now, What happens when you run JavaScript Code?

The simple answer is: A Execution Context Created. 

Now I write a demo code below and I will say line by line, how the code run.  

Javascript

<script>
    var n = 3;
    function squr(num) {
        var ans = num * num;
        return ans;
    }
    var three = squr(n);
</script>

When you run this whole code a global EXECUTION CONTEXT is created and it contains two parts one is memory and the other is code execution. 

When the first line is encountered it will reserve memory for all variables(n, three, five) and function(square). When reserving the memory for variables it reserves a special value undefined and for function, it stores whole code. the pictorial representation is shown below.

PICTORIAL REPRESENTATION OF GLOBAL EXECUTION CONTEXT

After allocating memory for all variables and function, code execution phase starts(code runs line by line). 

Line 1: var n=3,  3 value placed into the n identifier.

Line 2-5: nothing to execute.

line:6: we invoke a function, now function is the heart of JavaScript. The function is a mini-program and whenever a new function is invoked all together a new EXECUTION CONTEXT is created(inside the code execution phase). it also contains two-part memory and code execution phase. Memory is allocated for variable and function(it involves function parameters and other variables).

PICTORIAL REPRESENTATION OF FUNCTION EXECUTION CONTEXT

After allocating memory, the code execution phase comes here the code inside the function executes, and undefined is replaced by the actual value. 

PICTORIAL REPRESENTATION  OF EXECUTION CONTEXT WHILE FUNCTION EXECUTE

After that when return is encountered return the control of the program to the place where the function is invoked, control goes to line 6, it’s find the answer in local memory and return the control three and value of three(undefined) replaced by the value of ans and after that whole thing deleted(execution context). 

PICTORIAL REPRESENTATION OF GLOBAL EXECUTION CONTEXT AFTER  CODE EXECUTED

After that Global Execution Context is Deleted and our program ends. And One more thing, JavaScript Handle everything deleted and created (to manage the execution context) it’s managing a stack. It,s name CALL STACK. It’s a Stack that maintains the order of execution.