let vs var in JavaScript: Scope and Captured Loop Bindings

The task

Inspect whether a block variable is visible afterward, then collect callbacks in two loops and call them after iteration has finished.

Runnable Node 22 example

const assert = require('node:assert/strict');

if (true) { var visible = 'block'; let local = 'hidden'; }
assert.equal(visible, 'block');
assert.throws(() => local, ReferenceError);
const fromVar = [];
for (var i = 0; i < 3; i++) fromVar.push(() => i);
const fromLet = [];
for (let j = 0; j < 3; j++) fromLet.push(() => j);
assert.deepEqual(fromVar.map(fn => fn()), [3, 3, 3]);
assert.deepEqual(fromLet.map(fn => fn()), [0, 1, 2]);
console.log(`var=${fromVar.map(fn => fn()).join(',')}; let=${fromLet.map(fn => fn()).join(',')}`);

Expected output and explanation

The var declaration remains visible outside the if block in this CommonJS script, while the let name is not available there. The failed lookup is asserted as a ReferenceError rather than left to crash the example.

The callbacks in fromVar refer to one loop variable whose final value is three. The let loop gives the callbacks the per-iteration binding demonstrated by zero, one and two. Calling the functions later exposes the difference; merely creating them does not print the captured values.

Pitfall to check

This script does not establish browser global-object behavior: Node CommonJS module scope is its runtime context. Also avoid reading a let binding before initialization; block scope is not a promise that an early lookup safely yields undefined.