What is Execution Context?

Whenever you write a piece of code, your code is in some memory that memory is called the “execution context”.

JavaScript is a synchronous, single-threaded language. It can only execute one command at a time and in a specific order.

We can imagine Execution context as a big container, invoked when the browser wants to run JavaScript code.

In Execution context there are two components:-

• Variable environment/Memory component
• Code component

In this memory component, variables and functions are stored as key-value pairs.

A code component is a place in the Execution context where code is executed one line at a time.

Code Example

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

In the above example we declared two variables a and b and initialized values 2 and 4, later we do sum operation. Now browser creates a global execution context with two components, namely memory/Variable and code components.

Memory/Variable Creation Phase

In this phase JavaScript will scan through all the code and allocate memory to all the variables and functions in the code. The variables will be assigned undefined and for functions, it will keep the entire function code.

Code Execution Phase

n code execution, it starts to execute through the whole code line by line, On reaching var a = 2, it initializes 2 to ‘a' variable in memory. As of now, the value of ‘a’ was undefined.

Similar, execution happens for the b variable. It initializes 4 to ‘b’. Then it calculates and stores the value of the sum in memory which is 6. Now, in the last step, it prints the sum value in the console and then destroys the global execution context as our execution is over.

Types of Execution Context

There are two types of execution context in JavaScript.

• Global Execution Context (GEC)

This is the default execution context in which JS code start its execution when the file first loads in the browser. All of the global code i.e. code which is not inside any function or object is executed inside the global execution context. GEC cannot be more than one because only one global environment is possible for JS code execution as the JS engine is single threaded.

• Local/Function Execution Context (FEC)

Every time a function is invoked, a new execution context is created for that function. Each function has its own execution context, but it’s created when the function is invoked or called. Functional execution context has access to all the code of the global execution context though vice versa is not applicable.

Example of execution context

As soon as the above code loads into the browser, JS engine pushes the global execution context in the execution context stack. When functionA is invoked from global execution context, JS engine pushes functionA execution context in the execution context stack and starts executing functionA.

When functionB is invoked from functionA execution context, JS engine pushes functionB execution context in the execution context stack. Once all the code of functionB gets executed, JS engine pops out functionB execution context. After this, as functionA execution context is on top of the execution context stack, JS engine starts executing the remaining code of functionA.

Once all the code from functionA gets executed, JS engine pops out functionA execution context from execution context stack and starts executing remaining code from the global execution context.

When all the code is executed JS engine pops out the global execution context and execution of JavaScript ends.

This is how the JavaScript engine handles the execution context.