Execution context represents the abstract environment where JavaScript code is evaluated and executed. All JavaScript code runs within some execution context.

Types of Execution Contexts

JavaScript defines three execution context types:

• Global Context: The default context for code outside functions. It creates the global window object (in browsers) and sets this to the global object. Only one global context exists per program.
• Function Context: Created when a function is invoked. Each function call generates a new context, with potentially many existing simultaneously.
• Eval Context: Created for code executed via eval() functions.

Call Stack Operation

The call stack (execution stack) is a LIFO structure managing execution contexts. When scripts run:

1. JavaScript engine creates global context and pushes it onto the stack
2. Function calls create new contexts pushed to stack top
3. Engine executes topmost context's code
4. Completed contexts pop from stack

function alpha() {
  bravo();
}

function bravo() {
  console.log("Executing");
}

alpha();

Execution flow:

1. Global context created and pushed
2. alpha() call creates function context → pushed to top
3. bravo() call creates new context → pushed to top
4. bravo() completes → pops from stack
5. alpha() completes → pops from stack
6. Global context removed after all code executes

Context Creation Process

Execution contexts are created in two phases:

Creation Phase

Occurs before code execution with three main tasks:

1. This Binding: Determines this value
2. Lexical Environment: Created
3. Variable Environment: Created

Context structure representation:

ExecutionContext = {
  ThisBinding: <value>,
  LexicalEnvironment: { ... },
  VariableEnvironment: { ... }
}

This Binding Rules

• Global context: this references global object
• Function context: this depends on envocation method

Lexical Environment Components

Lexical environments consist of:

• Environment Record: Stores identifier-variable mappings
• Outer Reference: Link to parent lexical environment

Environment types:

• Global: No outer reference (null), uses object environment record
• Function: Uses declarative environment record with outer reference to enclosing scope

Variable Environment

A specialized lexical environment storing var declarations. Key differences from lexical environment:

• Lexical environment handles let/const and function declarations
• Variable environment handles var declarations

let x = 10;
const y = 20;
var z;

function compute(a, b) {
  var c = 30;
  return a * b * c;
}

z = compute(10, 20);

Context representasion:

GlobalContext = {
  ThisBinding: <Global Object>,
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      x: <uninitialized>,
      y: <uninitialized>,
      compute: <function>
    },
    outer: null
  },
  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      z: undefined
    },
    outer: null
  }
}

FunctionContext = {
  ThisBinding: <Global Object>,
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      Arguments: {0:10, 1:20, length:2}
    },
    outer: <GlobalLexicalEnvironment>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      c: undefined
    },
    outer: <GlobalLexicalEnvironment>
  }
}

Note the different initialization states:

• let/const: Uninitialized (temporal dead zone)
• var: Initialized as undefined

Execution Phase

During execution:

• Variable assignments occur
• Code executes line by line
• Uninitialized variables receive values