Predict output

1 of 5 · 0 right

Task orderingIntermediate

1const order = [];2setTimeout(() => order.push("timeout"), 0);3Promise.resolve().then(() => order.push("promise"));4order.push("sync");

Make a prediction

In what order does order fill up?

Concepts in predict output0 of 15 answered

Array mapClosuresObject referencesDefault parametersEvent loopArray sortShallow copyCallback argumentsType coercionArray lengthTask orderingReduce accumulatorTruthinessString immutabilityNaN comparison

This set—

Best set—

Lifetime—

Library seen0/45

Learn

Back to the tool

Code reading gym

Reading code is a separate skill from writing it, and almost nothing practises it directly. Commit to a prediction about one of 45 short JavaScript snippets, then step through the execution trace one value at a time and read which mental model the wrong answers came from. Snippets you have not met are dealt first, and where one can be run safely a sandboxed worker executes the reviewed original and reports what it actually printed.

Step by step

How a set works

01
01Pick what you are reading for
Predict-output asks what the snippet prints. Trace-values asks what one binding holds at a specific point. Find-the-bug asks which line produces the wrong result. Same language, three different reading habits.
02
02Commit before you look
The trace stays hidden until you answer. That is the whole design: a prediction you never made cannot be corrected, and reading the answer first feels like understanding without producing any.
03
03Step through the trace
With stepped reveal on, the trace unfolds one line at a time so you can predict each intermediate value rather than scanning a finished list. Turn it off when you would rather see the whole execution at once.
04
04Read the misconception
Every challenge names the mental model its distractors come from — that map returns the array it was called on, that a closure captures a value rather than a binding, that a spread copies deeply. Naming the wrong model is what stops it recurring.

Why this one

What this tool does differently

A trace, not just an answer

Each snippet carries a hand-written execution trace: the bindings created, the values they took, and the order it happened in. The answer tells you whether you were right; the trace tells you where your reading diverged from the runtime.

Verified against a real runtime

Executable challenges are run in a short-lived Web Worker and the output is shown beside the explanation. The repository's own test suite asserts that every executor's output equals the curated answer, so the two cannot drift apart.

Distractors with a diagnosis

The wrong options are not noise. Each is the answer a specific misconception produces, and the explanation names it, so a miss identifies the belief to fix rather than just costing a point.

Filter by level

Foundation covers object references, default parameters, array copying, coercion, truthiness, and loop boundaries. Intermediate covers closures, the event loop and task ordering, block scope, reduce, hoisting, and mutation. Running one level at a time keeps a set coherent.

A concept map that persists

Under the challenge, all 15 concepts the current mode teaches are listed, with the ones you have answered correctly marked, and the footer tracks how much of the 45-snippet library you have seen. Sessions deal unseen snippets first, so that number keeps moving instead of stalling.

Nothing arbitrary is executed

Only reviewed snippets have matching worker executors, addressed by id. There is no eval of user input, no network access from the worker, and an execution that overruns 800ms is terminated and reported rather than left hanging.

FAQ

Questions, answered plainly

How do I get better at reading code?

Pause at every assignment and ask two questions: what changed, and who can now see it. Most confusion in JavaScript comes from following the line being executed rather than the binding being mutated. Predicting output before running is the drill that builds the habit, because it forces you to hold the state in your head instead of asking the runtime.

Does this run arbitrary JavaScript?

No. Challenges are a fixed, reviewed set, and only those with a matching executor are run — addressed by an id, not by sending source code anywhere. You cannot paste your own code in, the worker has no network access, and it is terminated after each run.

Why does the trace stay hidden until I answer?

Because seeing the state first replaces the exercise with reading comprehension. Retrieval — committing to an answer and then being corrected — is what moves a mental model. The stepped reveal extends the same idea into the trace itself, one value at a time.

Which language and features are covered?

Modern JavaScript only, so every explanation can be precise about semantics: array methods and their return values, closures over loop bindings, object reference sharing, shallow copies, default parameter evaluation, block scope, and microtask versus macrotask ordering in the event loop.

Do I need to know JavaScript to start?

You need to be able to read a for loop and a function call. Start on Foundation, which sticks to references, defaults, copying, and loop boundaries, and move to Intermediate when the misconceptions stop surprising you.

Where is my progress stored?

In this browser's localStorage: lifetime totals, your best set, and which concepts you have answered correctly. Nothing is uploaded, and the share link carries only the mode, difficulty filter, reveal setting, and the set seed.

Challenges run in your browser, and the verification worker executes reviewed snippets locally. Nothing is uploaded, progress stays in localStorage on this device, and the share link carries only the session settings and seed.

Keep going