Execution Context In JavaScript.

Have you ever wondered why JavaScript seems puzzle and confusing to a lot of people? The answer to this lies in the way JavaScript’s engine works. Lets end our confusion and study the execution context.

First of all execution context is just an abstract representation of the environment in which JavaScript runs. Abstract representation means it’s just an idea about how JavaScript’s engine works. It is a representation of how JavaScript engine works.

“Everything in JavaScript happens inside an execution Context.”

When any JavaScript code is executed a global execution context is created as seen below.

Every Execution context has two components.

1. Memory component or variable environment : It contains all the variable and function names as key : value pair.
2. Code Component or thread of execution :Code is executed by JavaScript engine one line at a time.

“JavaScript is a Synchronous single threaded language”

Yes you heard it right!!!!!

Single thread refers to execution of one command at a time and synchronous means in a specific order. So in code component or thread of execution component , code is executed one line at a time in a specific order.

Let’s take an example .

There are two types of execution context.

1. Global execution context: When our program start to execute a global execution context is created. As JavaScript is single threaded so only one global execution context is possible.
2. Local or Functional execution context: When there is a function calling or invoking during code execution (not when the function is defined).

So lets go through our example to understand all this.

1. var n=2;
2. function square(num){
3.     var ans=num*num;
4.     return ans;
5. }
6. var squareAnswer=square(n)

When the program start to execute at beginning of line no.1 in above code example, global execution context is created. Global execution context (or any other execution context) is created in two phases(remember we talked about the two components of execution context.)

First Phase: Memory creation Phase

JavaScript engine (with help of his friends Compiler and Scope, We will talk about them later )go through all the code and allocates memory to all the variables and functions. As key : value pair.

All the variables are initialized with the special keyword “undefined” in the memory component or the variable environment (just a fancy name)

Functions acts differently in JavaScript and the whole function code { within the parenthesis are stored , function name is the reference to the code. }

All the function names are stored as a key and the value of the key is the whole function code itself as in our example square is stored with the whole function code in the memory component.

{
var ans= num*num;
return ans;
}

Second Phase: Code execution Phase:

So after allocating the memory to variables and function names, the second phase start executing and the code’s actual execution begins in the code or thread execution component.

1. Again coming to the above example when JavaScript encounters line 1 of the code and executes it.

1. var n=2;
2. function square(num){
3.     var ans=num*num;
4.     return ans;
5. }
6. var squareAnswer=square(n)

It allocates the value “2” to the variable n in the memory, undefined is replaced by value “2".

2. From code Line 2 to 5, there is nothing to do as the function name is already stored in memory component along with the code inside the function.

1. var n=2;
2. function square(num){
3.     var ans=num*num;
4.     return ans;
5. }
6. var squareAnswer=square(n)

3.When line 6 is executed as it is an assignment expression and RHS will evaluate first, square(n) is evoked (or called).

var squareAnswer=square(n);

when a function is evoked or called in JavaScript one more execution context refers as the functional execution context is created with its two phases .

Memory creation phase in Functional execution context.

Again in the memory component of the functional execution context all the variables and functions (if present inside the function) declarations are stored in the memory component. Variables are stored with ( initialization) “undefined” keyword and Functions name with their code as it is. Same as done in the case of global memory creation phase.

{
    var ans=num*num;
    return ans;
}

variable “ans” and “num” are stored in the memory component of functional execution context with “undefined” keyword.

Code execution phase in functional execution context.

1. var n=2;
2. function square(num){
3.     var ans=num*num;
4.     return ans;
5. }
6. var squareAnswer=square(n)

as variable “num” is encounter value of n is passed to it which is equal to “2”. All of this is done behind the scenes. This can be stated as:

num=2;

so now “num” is equal to “2”. The undefined value of “num” in the local memory component of the function is changed to “2”.

var ans=num*num;

as num=2;

so ans=2*2;

ans=4;

value of variable “ans” is replaced to “4” from “undefined” in the memory component.

1. var n=2;
2. function square(num){
3.     var ans=num*num;
4.     return ans;
5. }
6. var squareAnswer=square(n);

now as we encounter the return keyword (line:4) the value “4” is return and the program control return to line no: 6. Now ,as the value is return, the functional execution context is deleted.

var squareAnswer=4;

After executing line no 6, the program ends and the global execution context is Deleted as well .

So in this way the Execution Context is created and executed.

KEY POINTS:

1. Every time we execute a JavaScript Program A global execution context is created.
2. Global execution context is created once, if there is a function evoking or calling , functional execution context is created too.
3. As the program may be complicated with many nested levels of functions so more and more execution context is created on top of each other.
4. The call stack Manages the execution contest sequence. When the program starts executing the global execution context is pushed to the bottom of call stack. With the global execution context at the bottom and as the functions are called or evoked further ,functional execution context are push on top of each other in the stack.
5. When return keyword is encounter the functional execution context is deleted or popped out from the call stack.
6. After execution of the program the global execution context also gets popped out of stack. Call stack becomes empty

Thank You for reading this ,Please give a response I will answer all your queries.