setTimeout in a Loop — var vs let

·Easy·Event Loop

Why var prints 3 3 3 and let prints 0 1 2

Practice mode

Step

One shared binding for the var loop

var i is function-scoped: the loop creates exactly one variable, and all three callbacks will close over that one.

Algorithm workspace

Execution

Step 1 / 18init

100%

browser

task

→microtasks

→render

↻

running: main script

Call stack

Queues

Microtasksmicrotask

drained fully after every task, before rendering

empty

Tasks (timers, events)macrotask

one per loop turn

empty

Console output

no output yet

var i is one binding shared by three callbacks · let j is a fresh binding per iteration

Explanation

Nothing is queued yet. The important decision has already been made though — there is one i, not three.

step 1 / 18

Space play← → stepHome reset

Time—·SpaceO(n) queued callbacks

Execution

1for (var i = 0; i < 3; i++) {//i: 0
2  setTimeout(() => console.log('var i =', i), 0);
3}
4 
5for (let j = 0; j < 3; j++) {
6  setTimeout(() => console.log('let j =', j), 0);
7}
8 
9console.log('sync done, i =', i);

Command Palette

setTimeout in a Loop — var vs let