Suggest an edit

Improve this article

Refine the answer for “Execution context”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

1. **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
  ```
2. **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
  ```
3. **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:

1. **Variable Environment**
  - Stores `var` declarations, functions and their values.
2. **Lexical Environment**
  - Reflects the nesting structure of the code (closures).
  - Used to look up variables "up the chain".
3. **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:

1. A global context is created → pushed onto the stack.
2. `a()` is called → context `a` is added to the stack.
3. `b()` is called → context `b` is added to the stack.
4. `b` finishes → it's removed from the stack.
5. `a` finishes → it's removed.
6. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts537 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.