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

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:

1. let i = 1 (once, at the very start)
2. Check i <= 5 → if true, run the body; if false, leave the loop
3. Run the body: sum = sum + i
4. 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.