Javascript: Execution Context and Call Stack

The execution context is a place where your javascript code is actually executed and the call stack is the collection of your execution context which works in the LIFO(Last in First out manner).

The above words seems like a bookish definition , let’s go deep-down into these with the help of some practical examples.

Execution Context :

The code is straight forward:

x is assigned a value 10;

function declaration product;

third, call the product()and assigned to result ;

What is happening behind the scenes in javascript, how the javascript engine executes the following code??.. 🍴 When the javascript executes the above script it creates execution context and each execution context has two phases:

1. The Creation Phase:
2. The Execution Phase

Whenever our script executes firstly it will create a global execution context and during creation phase it will perform following task:

a. Creates a global object window

b. Creates a this object binding which points to global object above.

c. Set memory space for functions and variables

d. Store the function declaration in memory heaps and variable declaration with undefined values in global execution context

In our example like this:

Global Object : window,

this: window,

x: undefined ,

product : function {…}.

result : undefined

After the creation phase it will move to the execution phase, during this phase the code will be executed line by line:

Global Object : window,

this: window,

x: 10,

product : function {…}.

result : product()

Whenever a function call is there like ( result = product()), it will create a Function execution context ,which is similar to global execution context , but instead of creating global object , it will create arguments object which contain reference to the parameters passed, the creation phase of product will look like:

Global Object : window,

this: Global Object ,

z: undefined,

then the execution phase :

Global Object : window,

this: Global Object ,

z: 10,

But we are not getting our end result because we got a function call during the execution phase of global execution context, so firstly the execution phase of the function execution context will be completed, then our global execution context . The whole thing is managed by the call stack.

Call Stack:

The call stack based on the LIFO format i.e. last in first out, When you execute the script the javascript engine create global execution context and push it on the top of a stack.

main() : denotes the global execution context

Whenever there is a function call , then it’s create function execution context and push it on the top of a stack and the execution will shift to the top context of the stack.

average() : denotes the function product(){..}

Javascript engine will execute the execution context which is on the top of the stack and pop’s it out of the stack . It will continuously repeat the the cycle until the stack is empty.

The final result will look like after executing the whole script 😍.

result : 100

That’s it. 🙌

Clap 👏: If you like,

Follow ✋: For more topics,

Comment 💭 : Doubts and Suggestions.