What is Execution Context

The Execution Context is an abstract concept in JavaScript that defines the environment in which a piece of JavaScript code is executed. This environment includes the value of this, variables, objects, and functions that are available for use. Understanding execution context is crucial for mastering the behavior of JavaScript, especially when dealing with scope, closures, and the this keyword.

Types of Execution Context

JavaScript has two main types of execution contexts:

• Global Execution Context (GEC):

  When a JavaScript program starts executing (index.js script file), the JavaScript Engine creates a special execution context known as the Global Execution Context (GEC), and the GEC is pushed onto the Call Stack. This is the first execution context that gets created and is responsible for running the overall script. The GEC consists of:

  • Variable Environment: Contains variable declarations, function declarations, and their values in memory.
  • Lexical Environment: Refers to the scope in which a function is declared, including variables accessible from that scope.
  • The this Binding:

    In the global execution context:

    • In **browser environments**, this refers to the **window** object.
    • In **Node.js**, this refers to an **empty object ()**.
    • In **strict mode ('use strict')**, this is **undefined**.

    Note :The term "binding" means that this is assigned a specific value depending on how and where the code is executed.

• Function Execution Context (FEC):

  When a function is invoked, the JavaScript Engine creates a new execution context specifically for that function. This context is pushed onto the Call Stack and consists of:

  • Variable Environment: Contains the function's local variables and function declarations.
  • Lexical Environment: Points to the function’s outer environment (its parent scope).
  • The this Binding:

    The value of this inside a function depends on how the function is called:

    • For **regular functions**, this depends on the calling object.
    • For **arrow functions**, this is lexically inherited from the surrounding scope.
    • In **strict mode ('use strict')**, this is undefined unless bound explicitly.

Lifecycle of Execution Context in JavaScript

The execution context in JavaScript goes through three main phases during its lifecycle:

• 1. Creation Phase (Memory Allocation)

  When JavaScript starts executing a script or function, the first step is the Creation Phase, where:

  • A new execution context is created.
  • A variable environment is set up, and **hoisting** occurs:
    • **Function declarations** are stored in memory, so they can be used even before they are defined.
    • **Variables declared with var** are hoisted but assigned undefined.
    • **Variables declared with let and const** are hoisted but remain in the **Temporal Dead Zone (TDZ)** until their declaration is encountered.
  • A lexical environment is created, storing references to its surrounding scope.
  • The this keyword is determined based on the execution context (e.g., window in the browser).
• 2. Execution Phase

  In this phase, JavaScript starts executing the code line by line:

  • Variables are assigned their actual values.
  • Functions are invoked, creating new **Function Execution Contexts (FECs)**.
  • The call stack tracks execution order.
• 3. Destruction Phase (Popping from Call Stack)

  Once the execution is completed:

  • The function execution context is removed from the **Call Stack**.
  • Memory used by local variables (except closures) is cleared.
  • Global Execution Context remains until the entire script finishes execution.

Execution Context with code and diagram

So we have below code

// index.js (script file)
1. var a = 10;
2. console.log(a)
3. function add(x, y) {
4.   var result = x + y;
5.   return result;
6. }
7. console.log(add(2, 3)); 

Now you guess, here JavaScript program executing, what will happen ? A global execution context will be create and it will be like below diagram.

Also GEC will be pushed into call stack, and our call stack will look like below

In above GEC diagram in green color, i have writen like Here function is calling so function execution context will be created, So what will happen next, a function execution context will be created like below because we are calling a function.

And it will be also pushded into call stack. Now our call stack is

Now let's look at code again, so our code is :

// index.js (script file)
1. var a = 10;
2. console.log(a)
3. function add(x, y) {
4.   var result = x + y;
5.   return result;
6. }
7. console.log(add(2, 3)); 

After returning the value at line number 5 (The function returns 5 to the caller (add(2,3))), the Function Execution Context (FEC) is Destroyed and removed from the Call Stack. And now our call stack is

And after that no more code to execute so GEC will be also Destroyed and removed from the Call Stack. At this point, the Call Stack becomes empty and disappears.

Argument Object

The arguments object is available inside regular functions and contains all the passed arguments.

function showArguments() {
  console.log(arguments); //[Arguments] { '0': 10, '1': 'React', '2': true }
}

showArguments(10, "React", true);

The arguments object is not available in arrow functions. Accessing arguments inside an arrow function will result in an error.

const showArguments = () => {
  console.log(arguments); //  ReferenceError: arguments is not defined
}

showArguments(10, "React", true);

Note : We have discuss this in details later.

Key Points to Remember

• Every piece of JavaScript code runs in an execution context.
• The global execution context is created first, followed by function execution contexts as functions are called.
• Hoisting occurs during the creation phase of an execution context.
• Understanding execution context helps in debugging issues with this, scope, and closures.

Key Takeaways

The concept of execution context is fundamental to understanding how JavaScript works under the hood. It defines the environment in which your code executes and directly impacts variables, functions, and the value of this. Mastering execution context will help you write better and more predictable JavaScript code.