6.1 Execution Context

Introduction

Every time JavaScript runs code, it creates an execution context—an environment where the code is evaluated and executed. Understanding execution contexts is key to understanding scope, hoisting, this, and closures.

---

What is an Execution Context?

An execution context is a container that holds information about the environment in which code is currently running.

┌────────────────────────────────────────────────────────┐
│               EXECUTION CONTEXT                         │
├────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │         VARIABLE ENVIRONMENT                      │   │
│  │  • Variable declarations                          │   │
│  │  • Function declarations                          │   │
│  │  • Arguments object                               │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │         LEXICAL ENVIRONMENT                       │   │
│  │  • let/const declarations                         │   │
│  │  • Outer environment reference                    │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐   │
│  │              THIS BINDING                         │   │
│  │  • What 'this' refers to                          │   │
│  └─────────────────────────────────────────────────┘   │
│                                                         │
└────────────────────────────────────────────────────────┘

---

Types of Execution Contexts

1. Global Execution Context (GEC)

Created when JavaScript first runs your code.

// Global Execution Context
var globalVar = "I'm global";
let globalLet = 'Also global';

function greet() {
  console.log('Hello!');
}

// Everything here is in the Global Execution Context

Characteristics:

• •Only ONE global context per program
• •Creates the global object (window in browsers, global in Node.js)
• •Sets this to the global object
• •Created before any code executes

2. Function Execution Context (FEC)

Created every time a function is called (not declared).

function outer() {
  // New Function Execution Context created
  var outerVar = 'outer';

  function inner() {
    // Another new Function Execution Context
    var innerVar = 'inner';
  }

  inner(); // FEC for inner() created here
}

outer(); // FEC for outer() created here

3. Eval Execution Context

Created when code runs inside eval(). (Rarely used, avoid in practice)

eval('var x = 10;'); // Creates its own execution context

---

Execution Context Lifecycle

Every execution context goes through two phases:

Phase 1: Creation Phase

┌────────────────────────────────────────────────────────┐
│                   CREATION PHASE                        │
├────────────────────────────────────────────────────────┤
│                                                         │
│  1. Create Variable Object (VO)                         │
│     └── Scan for function declarations                  │
│     └── Scan for variable declarations (var)            │
│     └── Set up arguments object                         │
│                                                         │
│  2. Create Scope Chain                                  │
│     └── Current VO + all parent VOs                     │
│                                                         │
│  3. Determine 'this' binding                            │
│                                                         │
└────────────────────────────────────────────────────────┘

Phase 2: Execution Phase

┌────────────────────────────────────────────────────────┐
│                   EXECUTION PHASE                       │
├────────────────────────────────────────────────────────┤
│                                                         │
│  1. Assign values to variables                          │
│  2. Execute function calls                              │
│  3. Execute code line by line                           │
│                                                         │
└────────────────────────────────────────────────────────┘

---

Visualizing the Phases

function greet(name) {
  var greeting = 'Hello';
  var message = greeting + ', ' + name + '!';
  return message;
}

greet('Alice');

Creation Phase for greet("Alice"):

┌────────────────────────────────────────────────────────┐
│    FUNCTION EXECUTION CONTEXT - greet("Alice")         │
├────────────────────────────────────────────────────────┤
│  Creation Phase:                                        │
│                                                         │
│  arguments: { 0: "Alice", length: 1 }                   │
│  name: "Alice"                                          │
│  greeting: undefined  ← hoisted, not yet assigned       │
│  message: undefined   ← hoisted, not yet assigned       │
│  this: global object (or undefined in strict mode)     │
│                                                         │
└────────────────────────────────────────────────────────┘

Execution Phase:

┌────────────────────────────────────────────────────────┐
│  Execution Phase (line by line):                        │
│                                                         │
│  Line 2: greeting = "Hello"                             │
│  Line 3: message = "Hello, Alice!"                      │
│  Line 4: return "Hello, Alice!"                         │
│                                                         │
└────────────────────────────────────────────────────────┘

---

The Global Execution Context in Detail

In Browsers:

// Before any code runs, JavaScript creates:

// Global Object
window = {
    // Browser APIs
    console: {...},
    document: {...},
    setTimeout: function() {...},
    // ... many more
};

// this = window in global scope
console.log(this === window); // true

// Global variables become properties of window
var name = "Alice";
console.log(window.name); // "Alice"

// let and const do NOT become window properties
let age = 25;
console.log(window.age); // undefined

In Node.js:

// Global object is 'global', not 'window'
console.log(global);

// But 'this' at module level is NOT global
console.log(this === global); // false
console.log(this); // {} (module.exports)

// var declarations are NOT added to global
var name = 'Alice';
console.log(global.name); // undefined

---

Multiple Execution Contexts

var name = 'Global';

function first() {
  var name = 'First';
  second();
  console.log(name); // "First"
}

function second() {
  var name = 'Second';
  console.log(name); // "Second"
}

first();
console.log(name); // "Global"

Execution Flow:

┌────────────────────────────────────────────────────────┐
│  1. Global Execution Context Created                    │
│     └── name = "Global"                                 │
│     └── first = function                                │
│     └── second = function                               │
│                                                         │
│  2. first() called → FEC for first() created           │
│     └── name = "First"                                  │
│     └── Calls second()                                  │
│                                                         │
│  3. second() called → FEC for second() created         │
│     └── name = "Second"                                 │
│     └── Logs "Second"                                   │
│     └── second() FEC destroyed                          │
│                                                         │
│  4. Back to first()                                     │
│     └── Logs "First"                                    │
│     └── first() FEC destroyed                           │
│                                                         │
│  5. Back to Global                                      │
│     └── Logs "Global"                                   │
│                                                         │
└────────────────────────────────────────────────────────┘

---

Variable Environment vs Lexical Environment

var (Variable Environment)

function example() {
  console.log(x); // undefined (hoisted)
  var x = 10;
  console.log(x); // 10
}

let/const (Lexical Environment)

function example() {
  // console.log(y); // ReferenceError: Cannot access before initialization
  let y = 20;
  console.log(y); // 20
}

The Temporal Dead Zone (TDZ):

┌────────────────────────────────────────────────────────┐
│  function example() {                                   │
│      // TDZ for 'y' starts here                         │
│      //                                                 │
│      // console.log(y); ← ReferenceError                │
│      //                                                 │
│      let y = 20; // TDZ ends here                       │
│      console.log(y); // 20                              │
│  }                                                      │
└────────────────────────────────────────────────────────┘

---

Scope Chain in Execution Context

Each execution context has a reference to its outer (parent) environment:

var a = 10;

function outer() {
  var b = 20;

  function inner() {
    var c = 30;
    console.log(a + b + c); // 60
  }

  inner();
}

outer();

Scope Chain:

┌────────────────────────────────────────────────────────┐
│                    SCOPE CHAIN                          │
├────────────────────────────────────────────────────────┤
│                                                         │
│  inner() EC                                             │
│  └── c = 30                                             │
│  └── Outer Reference → outer() EC                       │
│          │                                              │
│          ▼                                              │
│  outer() EC                                             │
│  └── b = 20                                             │
│  └── inner = function                                   │
│  └── Outer Reference → Global EC                        │
│          │                                              │
│          ▼                                              │
│  Global EC                                              │
│  └── a = 10                                             │
│  └── outer = function                                   │
│  └── Outer Reference → null                             │
│                                                         │
└────────────────────────────────────────────────────────┘

---

this Binding in Execution Context

this is determined when the execution context is created:

// Global context: this = global object
console.log(this); // window (browser) or global (Node)

const obj = {
  name: 'Object',
  method: function () {
    // Method context: this = obj
    console.log(this.name); // "Object"
  },
  arrow: () => {
    // Arrow function: this = lexical (outer) this
    console.log(this); // window/global
  },
};

obj.method(); // "Object"
obj.arrow(); // window/global

---

Summary

---

Next Steps

In the next section, we'll explore the Call Stack—how JavaScript keeps track of all these execution contexts.