IconVault logoIconVault
Sign in

JS Execution Context - Hoisting, Closures, this | IconVault

Animated walkthroughs of hoisting, closures and this-binding. Watch the context stack, creation vs execution phases and variable environments. Free.

All tools

JS Execution Context

Hoisting, closures and this, animated step by step

5 of 5 free uses left
step 1 of 6
Global Execution Context is created. Creation phase: memory is allocated for every declaration before a single line runs.

Code

console.log(a);        // undefined, not an error
console.log(greet);     // the whole function
// console.log(b);      // ReferenceError: TDZ
 
var a = 10;
let b = 20;
 
function greet() {
  return "hello";
}

Why var and function declarations are usable before their line runs, but let and const are not.

Execution context stack

Global EC

creation phase: allocating memory

The top box is the currently running context.

Variable environments

global

aundefined (var hoisted)
b<TDZ> (let, uninitialized)
greetƒ entire function

5 of 5 free walkthroughs left.

About this tool

IconVault's JS Execution Context visualizer turns JavaScript's invisible machinery into a step-by-step animation. Three lessons cover hoisting and the temporal dead zone, closures that keep outer scopes alive, and this-binding across method calls, detached functions and arrow callbacks.

Each step highlights the running code line, shows the execution context stack with creation and execution phases, and renders every variable environment so you can see bindings change. Everything is free and runs fully in your browser: perfect for interviews, teaching or finally understanding closures.

Frequently asked questions

Popular searches

javascript execution contextexecution contextjs hoistinghoisting javascripttemporal dead zonetdz javascriptjavascript closuresclosure explainedhow closures workjavascript thisthis keyword javascriptthis bindingarrow function thisjavascript scopescope chainvariable environmentlexical environmentglobal execution contextfunction execution contextcall stackcreation phaseexecution phasevar vs let vs constlet const hoistingfunction declaration vs expressionjavascript interview questionsclosures interviewthis interview questionshoisting interviewlearn javascript deeplyjavascript internalshow javascript worksjavascript enginejavascript runtimescope javascriptblock scopefunction scopeglobal scopeclosure examplesclosure use casesprivate variables closurethis in methodsthis lost javascriptbind call applydetached method thissettimeout thisevent handler thisarrow vs regular functionlexical thisjavascript visualizerexecution context diagramhoisting diagramclosure diagramjavascript step by stepjavascript for beginners advanced

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →