Surya JS Journey

Learn JavaScript through concepts, code, and guided practice.

A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.

Browser InternalsIntermediate

Execution Context

An execution context is the environment JavaScript creates to evaluate code, track variables, and determine `this`.

Whenever JavaScript runs global code or calls a function, it creates an execution context. That context stores variable bindings, function declarations, scope references, and the current `this` value. Execution contexts are pushed onto the call stack as functions run and removed when they finish.

Explanation

Whenever JavaScript runs global code or calls a function, it creates an execution context. That context stores variable bindings, function declarations, scope references, and the current `this` value. Execution contexts are pushed onto the call stack as functions run and removed when they finish.

Key Points

  • Global code starts in the global execution context.
  • Each function call creates a new execution context.
  • Execution contexts are stacked and removed as function calls complete.

Common Mistakes

  • Mixing up lexical scope with the temporary execution context created at runtime.
  • Assuming a function reuses the same local context on every call.
  • Ignoring how `this` is resolved inside each new call context.

Practice Workspace

execution-context.js

Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.

Editor

9 lines

Output

0 entries

Mode

practice

Workspace Notes

Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.

Live editing

Safe to change before every run.

Fast reset

Return to the original starter instantly.

execution-context.js
9 linesMonaco Editor
Loading...

Editor Actions

Use the editor to explore the example, then run it to inspect the console.

Console0 entries

Run the code to see output here.

Expected Output

global
inside lesson

Continue in Playground

Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.

Open in Playground

Related Concepts

Scope

Scope determines where variables are visible and which parts of your code can access them.

Hoisting

Hoisting describes how JavaScript processes declarations before executing code line by line.

Event Loop

The event loop coordinates synchronous code, queued tasks, and microtasks so JavaScript can handle async behavior.