Introduction

JavaScript Engine creates a special environment to handle the code execution. This special environment is called Execution Context. Everything in JS happens inside an Execution Context

There are two types of Execution Contexts in JS

• Global Execution Context: There would only be one Global Execution which contains the Global Object which would be the window object in the case of a browser.
• Local Execution Context/ Function Execution Context: When a function is invoked a separate execution context is created for the execution of code which is inside the invoked function.

How is Execution Context Created?

Execution Context is created in 2 phases

• Memory Creation Phase
• Code Execution Phase

Let's see an example and understand how Execution Context is created.

var a = 10;
function display(){
    console.log(name);
}
display();

In the above example even before executing a single line of code, a Global Execution context is created. As mentioned earlier Execution context is created in two phases, let's see how it's created.

• Memory Creation

  • In the Memory Creation phase, all the variables are assigned memory and are initialised with a special value called undefined. All the function definitions are stored in memory.

• Code Execution Phase

  • In the Code Execution phase code is executed line by line. Variables are initialised with the given value.

Note

If you add a debugger before the variable declaration of a and try printing the window object you would see that a is assigned a value of undefined. This process of assigning a variable with a default value is called Hoisting.

How is the order of execution maintained?

Since I mentioned that every function call has its own execution context, how is the order maintained? Call Stack comes to the rescue. As the name suggests, Call Stack is a Stack. Every time an Execution Context is created the Execution Context is pushed to the stack and after the code inside that execution context is executed, the Execution Context is popped out of the stack.

For the above example, when the Global Execution context encounters a display function call. A brand new execution context is created and which again goes through the phases of creation and when the code inside the display is executed display's execution context is popped out of Call Stack and the code inside the Global Execution Context is done executing then Global Execution Context is also popped out of the Call Stack.

Conclusion

• Everything in JS happens inside an Execution Context.
• Execution Context is created in 2 phases. 1) Memory Creation Phase 2) Code Execution Phase.
• In the Memory Creation phase variables are assigned a default value and function definitions are stored in the Memory.
• In the Code Execution phase code is executed line by line.
• The process of assigning variables a default value is called Hoisting.
• Order of execution is maintained via Call Stack.