All topics
1 / 100
Fundamentalsbeginner

var vs let vs const

How the three declaration keywords differ in scope, hoisting behavior, and mutability.

var came first. let and const were added in ES6 to fix specific problems it caused.

Think of `var` as a shout that echoes through the whole building (function), while `let` and `const` are a whisper that only the people in the same room (block) can hear.

Key Concepts

1
Scope: var ignores blocks.
    function f() {
      if (true) {
        var a = 1;
        let b = 2;
      }
      console.log(a);   // 1  -- var leaked out of the block
      console.log(b);   // ReferenceError: b is not defined
    }
var
2
var is scoped to the function. let and const are scoped to the nearest braces.
varletconst
3
Before the declaration line, they differ again.
    console.log(x);   // undefined      -- var is initialised
    console.log(y);   // ReferenceError -- let is not
    var x = 1;
    let y = 2;
4
All three are hoisted. var is initialised to undefined; let and const sit in the temporal dead zone until their line runs, so reading them early throws instead of silently giving undefined.
varundefinedletconst
5
That is the improvement. A typo that used to produce undefined and fail three functions later now fails at the line that is wrong.
undefined
6
The classic loop bug, which block scoping fixes.
    for (var i = 0; i < 3; i++) setTimeout(() => console.log(i));
    // 3 3 3   -- one i, shared, and it is 3 by the time they run
7
    for (let i = 0; i < 3; i++) setTimeout(() => console.log(i));
    // 0 1 2   -- let creates a new binding each iteration
8
This is the single most common interview question about the three, and the answer is that let gives each iteration its own i.
leti
9
const locks the binding, not the value.
    const o = { a: 1 };
    o.a = 2;          // fine -- the object is mutable
    o = {};           // TypeError -- the binding is not
const
10
So const means "this name will not point at something else". It does not freeze the contents. For that there is Object.freeze, and even that is shallow.
constObject.freeze
11
The convention. const by default, let when something genuinely reassigns, and never var.
constletvar
12
Defaulting to const is not fussiness — it makes reassignment visible. When every binding is const, a let in the code is a signal that this value changes, which is information.
constlet
13
What the interviewer is probing.1. "What is the output of a for loop with var and setTimeout inside?" Probing: the classic closure-over-var question. Stalls: "0, 1, 2." Moves up: three 3s with var, because one function-scoped binding is shared; let creates a fresh binding per iteration and prints 0, 1, 2.
14
2. "Does const make a value immutable?" Probing: binding versus value. Stalls: "Yes." *Moves up:* it freezes the binding, not the object — a const array can still be pushed to; Object.freeze is what shallow-freezes the contents.
15
3. "What is the temporal dead zone?" Probing: how let differs from var before declaration. Stalls: "Undefined before declaration." Moves up: let and const are hoisted but unreachable until declared, so access throws ReferenceError rather than giving undefined.
16
4. "Which should you reach for by default?" Probing: judgement. Stalls: "let, it is flexible." Moves up: const by default and let when reassignment is genuinely needed, because it narrows what a reader has to track.
Use cases:scopehoistinges6