JavaScript Execution Context Interview Questions

What is an execution context?

Every time JavaScript runs code, it creates an execution context — an internal data structure that tracks everything needed to execute that piece of code. Think of it as the complete environment for a single unit of execution.

Every execution context has three components:

1. Variable Environment — storage for variables, function declarations, and the arguments object for functions.
2. Scope chain (Lexical Environment) — a reference to the outer context's variables, enabling access to parent scopes.
3. this binding — the value of this within this execution context.

The two types of execution context

1. Global Execution Context (GEC)

Created once when your script starts. There is only ever one global execution context per JavaScript runtime.

• In browsers: this refers to the window object.
• In Node.js: this refers to the module.exports object (the global object is global).
• All global variables and functions live here.

// This code runs in the global execution context
var globalVar = 'I am global'
console.log(this === window)  // true (in browser)

2. Function Execution Context (FEC)

Created fresh every single time a function is called. Not when it's defined — when it's called. Each call gets its own isolated context.

function greet(name) {
  // A new execution context is created for this call
  const message = `Hello, ${name}`
  console.log(message)
}  // execution context is destroyed when function returns

greet('Alice')  // context #1 created, runs, destroyed
greet('Bob')    // context #2 created, runs, destroyed — completely separate

The two phases of execution context creation

Phase 1: Creation Phase

Before any code runs, the engine sets up the context:

• Scans for all variable declarations, initializes var to undefined, puts let/const in the TDZ.
• Stores full function declarations (this is why function declarations are fully hoisted).
• Sets up the scope chain by linking to the outer lexical environment.
• Determines the value of this.

function example() {
  // Creation phase registers:
  // - x → undefined (var)
  // - y → TDZ (let)
  // - add → [function body] (function declaration)

  console.log(x)    // undefined — var was hoisted
  console.log(add)  // [Function: add] — fully hoisted
  // console.log(y) // ReferenceError — let in TDZ

  var x = 10
  let y = 20
  function add(a, b) { return a + b }
}

Phase 2: Execution Phase

Now the engine runs the code line by line, assigning values and executing statements. Variables get their actual values. Functions get called. Expressions are evaluated.

The Call Stack

JavaScript uses a call stack to manage execution contexts. It's a LIFO (Last In, First Out) stack — the most recent context is always on top and is always the one currently running.

function multiply(a, b) {
  return a * b              // step 4: runs here
}

function square(n) {
  return multiply(n, n)     // step 3: calls multiply, pushes new context
}

function printSquare(n) {
  const result = square(n) // step 2: calls square, pushes new context
  console.log(result)
}

printSquare(4)              // step 1: pushes printSquare context

The call stack for this code:

// Step 1: printSquare(4) called
[global] → [printSquare]

// Step 2: square(4) called inside printSquare
[global] → [printSquare] → [square]

// Step 3: multiply(4,4) called inside square
[global] → [printSquare] → [square] → [multiply]

// Step 4: multiply returns 16, its context is popped
[global] → [printSquare] → [square]

// Step 5: square returns 16, its context is popped
[global] → [printSquare]

// Step 6: printSquare logs 16, its context is popped
[global]

A stack overflow happens when the call stack runs out of space — usually from infinite recursion. The stack has a size limit (varies by engine, roughly 10,000–15,000 frames in V8).

Lexical Environment and Scope Chain

Every execution context has a Lexical Environment — a record of local variables plus a reference to the outer lexical environment. This chain of references is the scope chain.

const globalVar = 'global'

function outer() {
  const outerVar = 'outer'

  function inner() {
    const innerVar = 'inner'
    // inner's scope chain:
    // innerVar → found here
    // outerVar → not here, check outer → found
    // globalVar → not here, not in outer, check global → found
    console.log(innerVar, outerVar, globalVar)
  }

  inner()
}

outer()

The scope chain is determined at the time the function is written (lexical/static scoping), not at the time it's called. This is why closures work — the inner function's lexical environment permanently references the outer function's variable environment.

this binding in execution contexts

The value of this is set during the creation phase of each execution context. It depends on how the function is called:

// Global context
console.log(this)  // window (browser) or global (Node.js)

// Regular function call — this is global (or undefined in strict mode)
function regularFn() { console.log(this) }
regularFn()  // window / undefined

// Method call — this is the object
const obj = {
  name: 'Alice',
  greet() { console.log(this.name) }  // this = obj
}
obj.greet()  // 'Alice'

// Constructor call — this is the new object
function Person(name) {
  this.name = name  // this = new Person instance
}
const p = new Person('Bob')

// Arrow functions — no own this, inherits from enclosing context
const arrow = () => console.log(this)  // this = whatever outer context has

Eval Execution Context

Code inside eval() gets its own execution context. Avoided in modern JavaScript — it breaks optimizations and is a security risk. Mentioned here because it shows up in spec definitions.

How this connects to the Event Loop

The call stack is the synchronous execution engine. The event loop monitors the call stack and the task queue. When the call stack is empty, it picks the next task from the queue and pushes it onto the stack — creating a new execution context for that callback.

console.log('1')  // runs in global context

setTimeout(() => {
  console.log('3')  // runs in a NEW execution context, pushed by event loop
}, 0)

console.log('2')  // runs in global context

// Output: 1, 2, 3
// setTimeout callback only runs after global context finishes