What is Execution Context and Execution Stack in JavaScript?

In this article, we will learn how our code runs in a browser using the v8 engine.

What is Execution Context?

"Everything in JavaScript happens inside an Execution Context."

Basically, the Execution context is the environment in which our code is executed and evaluated, Whenever any code is run in JavaScript, it’s run inside an execution context..

There are two types of execution context in JavaScript:

1) Global Execution Context:

  The Execution context also has a by default Global Execution Context.

Here, the javascript engine creates the global execution context before it starts to execute any code.

Variables and function that is not inside any function are stored in this Global execution context.  

  So, The Global execution context is just like any other execution context, except that it gets created by default, It is associated with a Global Object, which means a windows object, ex: this= window

There can only be one global execution context in a program.

2) Functional Execution Context:

A new execution context gets created every time a function is executed, so, each function has its separate execution context while they are executed.

There can be any number of function execution contexts. Whenever a new execution context is created.

What is Execution Stack?

The Execution stack Also known as the "calling stack" is a stack with a LIFO(Last in, First Out) structure, which is used to store all the execution context created during the code execution.

JavaScript is a single-threaded programming language, which means it has a single Call Stack. Therefore it can do one thing at a time.

The Call Stack is a data structure that records basically where in the program we are. If we step into a function, we put it on the top of the stack. If we return from a function, we pop off the top of the stack.

So, Whenever the engine finds a function invocation, it creates a new execution context for that function and pushes it to the top of the stack

The engine executes the function whose execution context is at the top of the stack. When this function completes, its execution stack is popped off from the stack, and the control reaches the context below it in the current stack.

Let's understand it with example:

let a = 'Hello World!';
function first() {
  console.log('Inside first function');
  second();
  console.log('Again inside first function');
}
function second() {
  console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');

When the above code loads in the browser, the Javascript engine creates a global execution context and pushes it to the current execution stack. When a call to first() is encountered, the Javascript engines creates a new execution context for that function and pushes it to the top of the current execution stack.

When the second() function is called from within the first() function, the Javascript engine creates a new execution context for that function and pushes it to the top of the current execution stack. When the second() function finishes, its execution context is popped off from the current stack, and the control reaches to the execution context below it, that is the first() function execution context.

When the first() finishes, its execution stack is removed from the stack and control reaches to the global execution context. Once all the code is executed, the JavaScript engine removes the global execution context from the current stack.