DEV Community: Tetsuo TANAKA

Watch a for Loop Change Your Variables, One Step at a Time

Tetsuo TANAKA — Fri, 30 Oct 2026 09:28:55 +0000

In this series, we use JSVisualizer, a free browser-based tool, to understand classic algorithms by watching them run. (New here? The previous post gives a quick tour of the tool.)

This time the topic is the for loop and the running total: adding numbers up one at a time. The star of the show is the Variable view.

Where beginners get stuck

Here's a program that adds up the numbers from 1 to 5:

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum = sum + i;
}
console.log(sum);

It prints 15. Simple enough — and yet beginners often trip up on a few things:

sum = sum + i looks wrong. In math, "sum equals sum plus i" is nonsense. In code, = means "compute the right-hand side, then store the result in the variable on the left" — this is called assignment. Knowing that is one thing; actually feeling it is another.
In what order do the three parts of for (...; ...; ...) run? When does i++ happen? When is i <= 5 checked?
What is i when the loop ends? It loops five times, so… 5?

Teachers often have students answer questions like these with a trace table: a hand-drawn table where you write down each variable's value line by line, crossing out and rewriting whenever something changes. It works, but it's tedious, and one slip of the pencil can leave you more confused than before.

JSVisualizer's Variable view builds that table for you, automatically, as the program runs.

Seeing it in the Variable view

How to read it

Paste the code into JSVisualizer, press ▶ Run, and open the Variable tab. Then press ▷ Human three times. (A "human-friendly" step stops only at meaningful changes, such as assignments and condition checks.) You'll see this:

Rows are the lines of your source code. The line being executed (here, line 2, the for) is highlighted in blue.
Columns are the variables in your program (sum and i). A new column appears when a variable is created.
The rightmost column shows the result of the loop condition, i <= 5.
Each cell holds the variable's value the last time that line ran. Lines that haven't run yet show "—".

At a glance: line 1 set sum to 0, line 2 set i to 1, and the condition i <= 5 came out true.

Stepping forward

Press ▷ Human five more times (eight in total):

On line 2, i is now 3, highlighted in orange. Orange means "this value changed on this step."

Now look at line 3. There, i is still 2. That tells you the last time line 3 (sum = sum + i) ran, i was 2, and sum became 1 + 2 = 3. After that, execution went back to line 2, ran i++, and i became 3. The same variable can show a different value on different rows, and that difference tells you the order in which things happened.

Running to the end

Jump to the end (the End key on your keyboard does this in one go):

The console at the bottom prints 15. The total is correct — but the table tells you more than that.

What the table reveals

1. `i++` runs after the loop body

As you step through, compare lines 2 and 3: the i on line 3 is always one less than the i on line 2. That's because a for loop runs in this order:

let i = 1 (once, at the very start)
Check i <= 5 → if true, run the body; if false, leave the loop
Run the body: sum = sum + i
Run i++, then go back to step 2

i++ is written at the far right of the for line, but it runs after the body.

2. When the loop ends, `i` is 6

In the final table, line 2 shows i as 6 and the condition i <= 5 as false. Line 3, meanwhile, shows i as 5.

The body runs five times, for i = 1, 2, 3, 4, and 5. But i itself goes up to 6, and the loop ends because i reached 6 and the condition became false. Keep this picture in mind for the classic quiz question: "What changes if you write i < 5 instead of i <= 5?"

3. Outside the loop, `i` doesn't exist

On line 5, console.log(sum), the i column shows "—". A variable declared with let in for (let i = 1; ...) exists only inside the loop, so it's gone once the loop finishes. Try changing line 5 to console.log(i): a Runtime Error appears below the code, saying 'i' is not defined.

4. `sum = sum + i` means "replace"

On line 3, sum is overwritten with every pass: 1 → 3 → 6 → 10 → 15. Watching the old value get replaced makes it click that = doesn't mean "equals". It means "compute the right side and put the result back into the variable on the left."

Bonus: see the full history with Exec Trace

The Variable view shows the latest value for each line, so the table stays exactly as tall as your code and is easy to compare against it. The trade-off is that older values get overwritten.

When you want to see the values at every single step, in order, switch to the Exec Trace tab. It's essentially the complete hand-written trace table:

Reading top to bottom, you can follow the whole story in one pass: sum grows 0 → 1 → 3 → 6 → 10 → 15, and finally i hits 6 and the condition turns false. Exec Trace gets its own post later in the series, when we look at binary search.

Try it yourself

Open the link below and press ▶ Run; the Variable view opens. Step forward with ▷ Human (the h key) and back with ◁ Human (H).

▶ Open in JSVisualizer (sum of 1 to 5, Variable view)

To change the code, press ✏ Edit. Try these edits — and predict how the table will change before you run each one:

Change i <= 5 to i < 5. What's the total? What is i when the loop ends?
Change i++ to i += 2. Which numbers get added?
Change sum = sum + i to sum = sum * i, and start sum at 1. What does the program compute now?

Wrapping up

The Variable view puts each line of your code next to the values its variables had the last time that line ran. It's a trace table that builds itself.
Values that just changed are highlighted in orange, so you can see what each step did.
Comparing rows reveals how a for loop really runs (check → body → i++) and even what i is when the loop exits.

Next up: conditionals (if / else if / else). We'll run a grading program through the Control Flow view and see, as a flowchart, which branches the program took and which it skipped.

See Your JavaScript Run 12 Different Ways: Meet JSVisualizer (and How It Differs from Python Tutor)

Tetsuo TANAKA — Fri, 30 Oct 2026 09:28:54 +0000

Why "seeing" code matters

If you've ever learned to program — or taught someone who is — some of these will sound familiar:

You copy an example, run it, and get the right answer. But you couldn't explain why it's the right answer.
Recursion makes perfect sense during the lecture. Then you sit down to write a recursive function and your mind goes blank.
You sprinkle console.log everywhere to chase a value, and halfway through you forget what you were looking for.

The root problem is that a program's behavior is invisible. Source code is static text, but when it runs it produces state that changes over time. Most beginner struggles come down to not being able to picture that hidden motion accurately.

This series introduces JSVisualizer, a web app that runs JavaScript one step at a time and shows you what's going on through 12 different views.

https://tntetsu.github.io/JSVisualizer/

It runs entirely in your browser. Nothing to install, no account needed.

The interface follows your browser's language (English, or Japanese if your browser prefers Japanese). You can switch at any time with the EN / 日 button in the top-right corner.

In this first post, I'll give you a quick tour and compare JSVisualizer with the well-known Python Tutor. From the next post on, each article picks one classic algorithm and pairs it with the view that explains it best.

The screen at a glance

The screen has two halves:

Left: your code. Paste in any JavaScript and run it. The line being executed is highlighted in blue, and the expression being evaluated right now is highlighted in orange. When execution is inside a function, the expression that called it (here, fact(n - 1)) gets a dashed purple underline.
Right: the views. Each tab shows the same moment of the same run from a different angle. Above is the Call Stack view, showing calls piling up: fact(4) → fact(3) → fact(2).

To use it, write some code, press ▶ Run, and use the buttons along the top to step forward (or backward). You can also drag the slider to jump to any point in the run.

The user manual explains every button and view in detail. You can also open it with the ? button in the top-right corner.

Feature 1: Step at four levels of detail

You choose how big a "step" is. Each level has its own forward and back buttons:

Buttons	Unit	Use it when you want to…
◀ Expr / ▶ Expr	Expression (finest)	see the order in which something like `a + b * c` is evaluated
◀◀ Stmt / ▶▶ Stmt	Statement	follow the flow one statement at a time
◁ Human / ▷ Human	"Human-friendly" step	stop only at meaningful changes: assignments, condition checks, loop updates (the best place for beginners to start)
⏪ Func / ⏩ Func	Function call	skip over function bodies and watch only calls and returns

A typical workflow: use Human steps to get the big picture, then switch to Expr steps when something puzzling happens. Every level can step backward, so when you think "wait, what just happened?", you can rewind instantly.

Feature 2: Twelve views

The views fall into three groups, depending on what they show:

Group	What it shows	Views
State	What the program remembers at a given moment	Variable, Exec Trace, Call Stack, Lifetime, Memory
Behavior	How execution unfolds over time	Expr, Subst, Control Flow, Heatmap, Call Tree
Data structures	What's inside arrays and objects	Arrays, Objects

Views also differ in how they handle time. Some show only the current moment and redraw on every step (e.g. Variable, Call Stack). Others lay out the whole history so you can see how you got here (e.g. Exec Trace, Subst, Heatmap). The first kind answers "what's going on right now?"; the second answers "how did things change?"

For example, here is the Subst view (short for substitution). It rewrites the recursive call fact(4) the way you'd expand it by hand — 4 * fact(3), then 4 * 3 * fact(2), and so on — leaving the whole expansion on screen at once.

Same program, same moment: the Call Stack view shows calls stacking up, while the Subst view shows an expression being rewritten. If one picture doesn't click, another one might. That's the whole reason for having twelve.

How is this different from Python Tutor?

Python Tutor is the best-known program visualizer out there and is used by learners all over the world. Despite the name, it also supports Java, C, C++, and JavaScript. So the first question people ask about JSVisualizer is usually, "How is this different from Python Tutor?"

	JSVisualizer	Python Tutor
Languages	JavaScript only	Python, Java, C, C++, JavaScript
Step size	4 levels (expression, statement, human-friendly, function), forward and back	1 level (line), forward and back
Visualizations	12 views, switchable via tabs	1 (frames and objects diagram)
Which expression is running	Highlights the exact expression	An arrow points to the line
The big picture of recursion (call tree, expansion by substitution)	Call Tree and Subst views	In JavaScript mode, frames disappear once a call returns
Sharing	Links that open specific code (via `?code=`, see below)	Shareable links and embed codes for a specific run

Python Tutor's diagram — frames on the left, objects on the right, arrows for references — is an excellent way to understand how variables relate to memory. JSVisualizer has a view of the same kind, called Memory.

Where JSVisualizer differs is that you're not limited to that one diagram. You pick the view that fits the question you're asking:

How does a variable change as a loop runs? → Variable, Exec Trace
How does a complicated condition turn into true or false? → Expr (stepping one expression at a time)
Which branch of an if did the program take? → Control Flow
Is my recursive function computing the same thing over and over? → Call Tree

So which one should you use?

Honestly, it's not about which is better — they shine in different situations.

Reach for Python Tutor when you…

are learning Python, C, or another language besides JavaScript
want to really understand variables, references, and memory ("boxes and arrows")
want to hand students a single link that replays one specific run

Reach for JSVisualizer when you…

are learning or teaching JavaScript
want to see things a memory diagram can't easily show: evaluation order, which lines ran and how often, how recursion branches out
want to look at the same program from several angles

For instructors: links that open specific code

You can add parameters to the URL so that JSVisualizer opens with a specific piece of code already loaded:

https://tntetsu.github.io/JSVisualizer/?code=<URL of a code JSON>&view=<view to show first>

code: the URL of a JSON file shaped like { "title": "...", "code": "..." }
view: the view that opens the first time the reader presses ▶ Run (trace, subst, controlflow, …)

Put a link like this in your slides or assignments — "open this, press Run, and step through it" — and every student starts from the same screen without retyping any code. Every post in this series ends with a link in this format.

Try it yourself

This link opens the factorial example from this post. Press ▶ Run and the Subst view opens. Use ▷ Human to step forward, and try switching between tabs as you go.

▶ Open in JSVisualizer (factorial, Subst view)

function fact(n) {
  if (n <= 1) {
    return 1;
  }
  return n * fact(n - 1);
}
console.log(fact(4));

Of course, you can also open the home page and paste in your own code.

Wrapping up

JSVisualizer is a web app that steps through JavaScript and lets you watch it run through 12 different views.
You can step at four levels of detail, and step backward at every level.
Beyond the memory diagram that Python Tutor does so well, you can pick a view that matches your question: evaluation order, branching, execution counts, or how recursion unfolds.

Next up: the first big hurdle in programming — the for loop. We'll take the classic "add up 1 through 5" program and use the Variable view to follow sum and i one step at a time.

DEV Community: Tetsuo TANAKA

Watch a for Loop Change Your Variables, One Step at a Time

Where beginners get stuck

Seeing it in the Variable view

How to read it

Stepping forward

Running to the end

What the table reveals

1. i++ runs after the loop body

2. When the loop ends, i is 6

3. Outside the loop, i doesn't exist

4. sum = sum + i means "replace"

Bonus: see the full history with Exec Trace

Try it yourself

Wrapping up

See Your JavaScript Run 12 Different Ways: Meet JSVisualizer (and How It Differs from Python Tutor)

Why "seeing" code matters

The screen at a glance

Feature 1: Step at four levels of detail

Feature 2: Twelve views

How is this different from Python Tutor?

So which one should you use?

For instructors: links that open specific code

Try it yourself

Wrapping up

1. `i++` runs after the loop body

2. When the loop ends, `i` is 6

3. Outside the loop, `i` doesn't exist

4. `sum = sum + i` means "replace"