JavaScript: Execution Context

shivam kumarshivam kumar
3 min read

JavaScript is a single threaded synchronous language And every things happen inside the Execution context.

single threaded means JavaScript can only run a piece of code at a time, it can't execute multiple programs parallely.

Synchronous means it execute the piece of code line by line.

Now let's understand what Execution Context mean.

Code Example :

var num =8;
console.log(num);
function sqr (){
   return n*n;
}
square = sqr(num);
console.log(square);

What dose this code do ?

  • assign 8 to a num variable

  • now print num variable.

  • now sqr function is created

  • sqr function is call and return its value to square variable.

  • print the value of square // 64

๐Ÿ˜‚ This is not the way how JS work . JavaScript done lost of things under the hood to run the small piece of code.

Execution Context:

When JS engine scan a script file , It makes an envoirnement called execution Context. And every things will be done under the Execution context.

There are two type of Execution context:

  1. Global Execution context: It is created when JS starts to run the file and it represent the global scope of JS.

  2. Functional Execution context : It is created when function is invoked and it represent the function's local scope of JS

Phases of the JavaScript Execution Context:

There are two phase of Execution context:

  1. Memory allocation phase

  2. code Execution phase

After GEC get created in first phase memory will be allocated to the variables and functions. and after that in second phase code execution phase will happen

Lets understand with Example:

step 1: memory allocation phase

In memory allocation phase , It dose not assign the actual value to variables, As you see in above example it dose not assign value to the variable instead it assign only memory to the variable, for variable it uses undefined keyword as a placeholder and for functions it actually store the whole function . In execution phase it assign the value to the variable.

step 2: Execution phase

Here you can see on the above example In execution phase It start execution the whole code line by line (synchronously) .

at line no.1 it assign 8 to the num , then it executed sqr function and we already know whenever the function is executed the FEC is created and the same thing happen again , Memory allocation phase and Execution phase.

Step 3 : FEC (Functional Execution Context)

step 4:

As soon the function execution is done the it return the control to GEC And FEC get deleted or destroyed.

And when the execution phase of GEC become completed then GEC also get destroyed or deleted.

And this All Maintain by Call Stack - Link

Summary :

When JS starts scanning the script the it makes an environment Known as Execution context ,Every things happen inside the JS in Execution Context, there are two type of execution context GEC and FEC and there are two phase of Execution context ,memory allocation phase and code execution phase . whenever the function is invoke the new FEC will be created inside the GEC ,after the work is completed the execution context get deleted and this all handled by Call stack.

11
Subscribe to my newsletter

Read articles from shivam kumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

shivam kumar
shivam kumar