Interactive JavaScript Learning

Understand JavaScript Deeply

Trace supported examples step by step and inspect execution contexts, bindings, scope lookup, and console output.

Start with How JS Runs →

Learning Path

How JavaScript Runs

Focused Execution Tracer

Edit supported examples and trace declarations, function calls, object creation, scope lookup, and console output step by step.

Scope Chain

Lexical Scope & Lookup

Follow identifier resolution across linked environment records and see how lexical nesting and shadowing determine each lookup result.

Understanding this

Call-Site Outcomes

Compare how call syntax and function semantics produce default, method, call/apply/bind, constructor, and lexical-arrow this outcomes.

Closures

Lexical Environment

See how functions retain access to outer lexical environments after the surrounding call has completed.

Learn from real JavaScript interview questions

Predict the output, then inspect each execution context, binding, scope lookup, and console result step by step.

Open Interview Lab →
About Deep JS

Why understand JavaScript execution internals?

Many JavaScript surprises — a variable that reads undefined instead of throwing, a loop callback that shares one binding, or a this value that changes with the call form — become easier to explain when you can inspect declarations, calls, and lexical lookup one step at a time.

Deep JS parses supported examples into an AST and produces an educational trace informed by ECMAScript operations. It is not a JavaScript engine or memory profiler: execution contexts, environment records, and displayed addresses are teaching models, not measurements of a browser engine. The site is free and available in English and Simplified Chinese.

Frequently asked questions

Is Deep JS a JavaScript engine or memory profiler?

No. Deep JS creates an educational trace for supported examples. Its stack, environment, object, and address diagrams help explain specification concepts; they do not expose the physical stack, heap layout, or addresses of V8, SpiderMonkey, or JavaScriptCore.

How does Deep JS explain `this` binding?

It starts from the call form and the function being invoked: construction, bound functions, call/apply, reference-based method calls, ordinary calls, and lexical arrow this follow different specification paths. The labels in the interface group common outcomes; they are not a single priority algorithm defined by ECMAScript.

What is the Temporal Dead Zone (TDZ)?

let and const declarations are registered in their environment record when a scope is prepared, but the binding cannot be read or written until execution actually reaches the declaration statement. Accessing the name before that point throws a ReferenceError instead of returning undefined.

Which JavaScript programs can I trace?

Use the built-in examples and interview questions for the most reliable traces. The editor supports the declarations, functions, objects, arrays, conditionals, loops, closures, this patterns, and selected timers used by those lessons; it is not a general-purpose JavaScript runtime.