Execution Context

Execution Context is the environment in which JavaScript code is evaluated and executed.

Every time JavaScript runs code, it does so inside an execution context.

At any moment:

• Only one execution context is active
• It always sits on top of the Call Stack

Types of Execution Context

JavaScript has two main execution contexts:

1. Global Execution Context (GEC)
2. Function Execution Context (FEC)

Global Execution Context (GEC)

• Created once when the JavaScript file starts executing
• In a browser, typically only ONE GEC is created per JavaScript realm (page/window)
• Represents code not inside any function
• Sits at the bottom of the call stack

Two Phases of GEC

Memory Creation Phase

Before executing a single line of code, JavaScript:

• Allocates memory
• Sets up scope

During this phase:

• var variables → initialized as undefined
• Function declarations → fully hoisted
• let & const → allocated but not initialized
• this → points to the global object (browser: window)

Code Execution Phase

• JavaScript executes code line by line
• Variables get actual values
• Functions are invoked

Example

var a = 10;

function foo() {
  console.log("Hello");
}

foo();

Memory Creation Phase:

• a → undefined
• foo → function reference

Execution Phase:

• a → 10
• foo() is invoked

Function Execution Context (FEC)

• Created every time a function is called
• Each function call gets a new execution context
• Pushed onto the call stack
• Destroyed after function finishes execution

Two Phases of FEC

Memory Creation Phase

• Function arguments are assigned
• Local variables are allocated
• Inner function declarations are hoisted
• this is determined (based on how function is called)

Code Execution Phase

• Function body executes line by line
• Values are assigned
• Nested function calls create more execution contexts

Example

function add(x, y) {
  var result = x + y;
  return result;
}

add(2, 3);

Inside add execution context:

• x → 2
• y → 3
• result → undefined (creation phase)
• result → 5 (execution phase)

How GEC and FEC Work Together

• Global Execution Context is pushed first
• Each function call:
  • Creates a new Function Execution Context
  • Pushes it onto the call stack
• When function returns:
  • Its execution context is popped off the stack

• Step 1: Only the Global Execution Context (GEC) is on the stack
• Step 2: greeting() is called and gets its own FEC, then it calls sayHi(), which gets another FEC on top
• Step 3: sayHi() and then greeting() finish and are popped off, leaving only the GEC

Call Stack Example

function one() {
  two();
}

function two() {
  three();
}

function three() {
  console.log("Done");
}

one();

Call Stack flow:

1. Global Execution Context
2. one() Execution Context
3. two() Execution Context
4. three() Execution Context
5. three() completes → popped
6. two() completes → popped
7. one() completes → popped

Common Interview Clarifications

• Execution Context ≠ Call Stack
  • Execution context is what
  • Call stack is where
• Only one execution context executes at a time
• Execution contexts are created synchronously
• Async callbacks create new execution contexts later

Common Misconceptions

❌ "Execution context is created for every line" ✅ Created only for global code and function calls

❌ "Async code runs in the same execution context" ✅ Async callbacks run in new execution contexts

❌ "Hoisting happens during execution" ✅ Hoisting happens during memory creation phase

What is an Execution Context Physically?

An execution context is:

• A C++ object / struct
• Allocated in native memory (heap)
• Created and destroyed by the JS engine (e.g. V8)
• Referenced by the call stack

Conceptual representation:

// Conceptual (NOT real V8 code)
struct ExecutionContext {
  LexicalEnvironment* lexicalEnv;
  VariableEnvironment* variableEnv;
  ThisBinding thisValue;
  CodePointer* instructionPointer;
};

Where Does It Live?

• Execution contexts live in engine-managed memory
• Not accessible from JavaScript
• Not visible in DevTools
• Exist only while code is executing

The Call Stack is essentially a stack of pointers to these execution context objects:

Call Stack (native memory)
┌─────────────────────────┐
│ Pointer → EC for foo()  │
│ Pointer → EC for bar()  │
│ Pointer → Global EC     │
└─────────────────────────┘

Key Takeaway

Execution context explains where variables live and how JavaScript executes code step by step.