Execution context

JavaScriptSenior~2 min read

An execution context is the internal environment in which a specific piece of JavaScript code runs. It determines what is available to the code at a given moment: which variables, functions, this, and so on.

The basic idea

When JS code runs, the engine creates an execution context - a kind of "workspace" with the needed data. Every time a function is called, a new context is created.

Types of execution context

Global context

Created when the script starts.
Available everywhere.
In the browser it is tied to the window object, in Node.js to global.
Variables and functions declared outside functions land here.

javascript

var x = 10;
function foo() {}
// Global context

Function context

Created on every function call.
Contains local variables, parameters, and the value of this.

javascript

function greet(name) {
  let message = "Hello " + name;
  return message;
}
greet("Tim"); // a new context is created for this call

Eval context (rarely used)

Created when code runs via eval().
Either isolated or using the outer context, depending on how it's called.

What is stored in an execution context

Every context consists of three main parts:

Variable Environment

Stores var declarations, functions and their values.

Lexical Environment

Reflects the nesting structure of the code (closures).
Used to look up variables "up the chain".

This Binding

Determines which object this refers to inside the context.

The execution context stack (Call Stack)

JavaScript is a single-threaded language, so only one context is active at any given time. When a new function is called, its context is pushed onto the call stack, and it is removed once the function finishes.

javascript

function a() {
  console.log("A");
  b();
}
function b() {
  console.log("B");
}
a();

What happens:

A global context is created → pushed onto the stack.
a() is called → context a is added to the stack.
b() is called → context b is added to the stack.
b finishes → it's removed from the stack.
a finishes → it's removed.
Only the global context remains.

An example to understand it

javascript

let x = 1;

function outer() {
  let y = 2;

  function inner() {
    let z = 3;
    console.log(x, y, z);
  }

  inner();
}

outer();

What happens:

A global context is created → x, outer.
outer() is called → a new outer context is created.
Inside it, y and inner are created.
inner() is called → an inner context is created, in which:
- x (from the global context), y (from outer), and z (local) are all available.
After finishing, all contexts are removed from the stack one by one.

In short

Level	Example	What it contains
Global context	the whole file	global variables and functions
Function context	on a function call	local variables, parameters, `this`
Lexical Environment	nested scopes	the chain for looking up variables
Call Stack	the stack	the order code executes in

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Execution context

#The basic idea

#Types of execution context

#What is stored in an execution context

#The execution context stack (Call Stack)

#An example to understand it

#In short

Short Answer

The basic idea

Types of execution context

What is stored in an execution context

The execution context stack (Call Stack)

An example to understand it

In short