Scenario

Quick test: does this print 3 or ReferenceError?
function demo() {
    for (var i = 0; i < 3; i++) {}
    console.log(i);
}
demo();
It prints 3. The loop ended, the { } closed, but var i doesn't care - it leaked right out of the for block into the enclosing function scope. Swap var for let and you'd get ReferenceError.

This one difference between var and let/const explains half the modern JavaScript style guide. It explains why for (let i ...) with setTimeout prints 0, 1, 2 while for (var i ...) prints 3, 3, 3. It explains why senior engineers tell juniors to "just stop using var." And it explains why standalone { } blocks are suddenly useful.

Block Scope vs Function Scope - Rooms Inside the House

JavaScript has two primary types of scoping: function scope (created by functions) and block scope (created by {} blocks like if, for, while, and standalone blocks).

Think of function scope like a house - everything inside the house is accessible from any room. Block scope is like individual rooms within that house - what's in a room stays in that room.

Function Scope - `var`

var is function-scoped. It only respects function boundaries, completely ignoring block boundaries:

function functionScoped() {
    if (true) {
        var x = "I exist everywhere in this function";
    }

    for (var i = 0; i < 3; i++) {
        // loop body
    }

    console.log(x); // "I exist everywhere in this function"
    console.log(i); // 3 -- leaked out of the for loop!
}

functionScoped();

var variables only get a new scope when they're inside a function:

function outer() {
    var a = "outer";

    function inner() {
        var a = "inner"; // different variable -- new function = new scope
        console.log(a); // "inner"
    }

    inner();
    console.log(a); // "outer" -- not affected by inner's `a`
}

outer();

Block Scope - `let` and `const`

let and const respect every {} block:

function blockScoped() {
    let a = "function level";

    if (true) {
        let a = "block level"; // different variable -- new block = new scope
        const b = "also block level";
        console.log(a); // "block level"
        console.log(b); // "also block level"
    }

    console.log(a); // "function level"
    // console.log(b); // ReferenceError -- b doesn't exist here
}

blockScoped();

Standalone Blocks

You can create blocks without any control structure - useful for limiting variable scope:

{
    const temp = computeExpensiveValue();
    // use temp here
    console.log(temp);
}
// temp is gone -- clean and contained
// console.log(temp); // ReferenceError

The Practical Difference - Loop Variables

// var: ONE variable shared across all iterations
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log("var:", i), 100);
}
// var: 3, 3, 3

// let: FRESH variable per iteration
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log("let:", i), 100);
}
// let: 0, 1, 2

With let, the JS engine creates a new binding for i in each loop iteration. Each setTimeout callback closes over its own separate i. With var, there's only one i shared by all callbacks.

Comparison Table

Feature	Function Scope (`var`)	Block Scope (`let`/`const`)
Created by	`function` keyword only	Any `{}` block
Leaks out of `if`/`for`	Yes	No
Loop iteration isolation	No (shared variable)	Yes (new variable per iteration)
Hoisting behavior	`undefined`	TDZ
Re-declaration in same scope	Allowed	Error

Common Mistakes

Using var inside a for loop with async callbacks and expecting each iteration to have its own counter - you'll get the final value every time.
Treating { ... } as a scope boundary for var - it isn't. Only function boundaries contain var.
Re-declaring a let or const in the same scope thinking it's harmless - it's a SyntaxError, unlike var which silently allows re-declaration.

Interview Questions

Q: What's the difference between block scope and function scope?

Function scope is created only by the function keyword - variables declared with var are confined to the nearest enclosing function. Block scope is created by any { } block (like if, for, or a standalone block) - variables declared with let or const are confined to that block.

Q: Why does var in a for loop leak outside the loop?

Because var is function-scoped, not block-scoped. The for loop's {} is not a function boundary, so var ignores it. The variable is scoped to the nearest enclosing function (or global scope if there's no function).

Q: Can you create a block scope without an if or for statement?

Yes. A standalone { ... } block creates a fresh block scope. Any let or const declared inside it is not visible outside the braces, which is a clean way to limit the lifetime of temporary variables.

Q: Which keywords create block-scoped variables?

let and const. Both respect every { } block, including if, for, while, switch, and standalone blocks. var ignores block boundaries and only respects function boundaries.

Q: Why does for (let i ...) with setTimeout print 0, 1, 2 but for (var i ...) print 3, 3, 3?

With let, the engine creates a fresh binding for i on every iteration, so each setTimeout callback closes over its own distinct i. With var, there is a single i shared across all iterations; by the time the callbacks run, the loop has finished and i has its final value.

Learn More

JavaScript Scope

Block Scope vs Function Scope

Scenario