Variables

Variables is a Timeline Panel. It is read from the recording, so moving back a Step shows what the values were then, not what they are at the end. An object shows what it held at that Step, even if the code changed it later.

Scopes

Names are grouped by the scope they live in, the innermost first:

• in factorial(): inside a function, named after it.
• in this loop, in this callback, in this block: inside a loop, an arrow function or a block.
• everywhere: the top level of the Snippet.

A name leaves the list when the code leaves its scope. A name hidden by another of the same name in an inner scope is not listed, because the code can't reach it from there. With nothing in scope, the panel says Nothing in scope.

• not set is a name that exists but has no value yet, such as a const before its line has run.
• A small object or array, up to 12 entries, opens by itself. Click any value to open or close it; it stays that way as you move.
• new each turn marks a name that is new on every turn of a loop, such as the score of for (const score of scores). A function made in that turn keeps that turn's value.

Captured by a closure

When a function reads a name from a function further out, Variables lists that name under the outer function's scope and adds · remembered. It is how a closure looks at the Step where it is used.

A loop's own variable, read inside the loop, is not remembered: it is in the same function. A name that lives everywhere is never remembered either.

What changed

The names this Step changed are lit, and listed first in their scope. This is Highlight changes, the button at the bottom right of Variables, on by default. It is also View → Timeline Panels → Highlight Changes.

Hover a name

Rest the pointer on a name in the code to see its value at the Step on screen. A property path works too: user.name. The box says the value, then its scope and what the Step did to it: in factorial() · changed here, new each turn, remembered.

The name you point at decides which variable it is, even when the Step is somewhere else. The Step decides the value, and a hover never shows a value from a later Step:

• Out of scope now, with a value before: the last value it had, then as of step and that Step's number, its scope, and not in scope here.
• Not run yet: in factorial() · this function has not run yet, or not in scope at this step for a top-level name.

Words in comments and strings have no value. To keep a value beside a line on every Run, use a Peek.