Variables in JavaScript (var, let, const)

Analogy categoryAnalogies

1. Introduction

A variable is a named container used to store data that a program can reference and manipulate. JavaScript provides three keywords for declaring variables: var (the original, function-scoped declaration), and let and const (introduced in ES6, both block-scoped). Choosing the right keyword affects where a variable is accessible, whether it can be reassigned, and how it behaves before its declaration is reached.

🏏

Cricket analogy: A variable is like a named locker in the dressing room holding a player's gear; var is an old-style locker shared across the whole stadium, while let and const, introduced later, are lockers strictly assigned to one dressing room only.

2. Syntax

javascript

var oldStyle = "function-scoped";
let mutable = "block-scoped, reassignable";
const fixed = "block-scoped, cannot be reassigned";

mutable = "changed";
// fixed = "error"; // TypeError: Assignment to constant variable.

3. Explanation

var declarations are scoped to the nearest enclosing function (or the global scope if declared outside any function), regardless of block boundaries such as if statements or loops. var declarations are also hoisted to the top of their scope and initialized with undefined, which is why you can reference a var variable before its declaration line without a ReferenceError.

🏏

Cricket analogy: var is like a nickname that applies across the entire tour regardless of which match you're in — even before it's officially announced, the name exists on the team sheet as a blank placeholder, so referencing it early doesn't crash the broadcast, it just shows TBD.

let and const are scoped to the nearest enclosing block ({ ... }), such as an if block, loop body, or function body. They are also hoisted, but they are not initialized, so accessing them before their declaration line throws a ReferenceError — this gap between the start of the scope and the declaration is called the Temporal Dead Zone (TDZ). const additionally requires an initializer and prevents reassignment of the binding, though it does not make the underlying value immutable — properties of a const object can still be changed.

🏏

Cricket analogy: let and const are like a nickname that only exists within one specific over — mentioning it before it's announced within that over throws a who's-that confusion, like the Temporal Dead Zone, and a const like 'Kohli is captain' can't be reassigned to another player, though Kohli's own stats can still change.

Gotcha: var is hoisted and initialized to undefined, so console.log(x) before 'var x = 5' logs undefined instead of throwing. let/const are hoisted too, but referencing them before their declaration line throws 'Cannot access before initialization' (the Temporal Dead Zone). Also remember: const prevents reassigning the variable binding, not mutation of the object or array it points to.

4. Example

javascript

console.log(x); // hoisted var, not yet assigned
var x = 5;

function testScope() {
  if (true) {
    var a = "function-scoped";
    let b = "block-scoped";
  }
  console.log(a);
  try {
    console.log(b);
  } catch (e) {
    console.log(e.message);
  }
}
testScope();

const obj = { name: "Alice" };
obj.name = "Bob"; // allowed: mutating a property, not reassigning obj
console.log(obj.name);

5. Output

text

undefined
function-scoped
b is not defined
Bob

6. Key Takeaways

var is function-scoped; let and const are block-scoped.
var declarations are hoisted and initialized to undefined; let/const are hoisted but stay in the Temporal Dead Zone until their declaration runs.
const prevents reassigning the variable, but objects/arrays it references can still be mutated.
Prefer const by default, use let when a variable needs to be reassigned, and avoid var in modern code.
Redeclaring a var in the same scope is allowed and silently overwrites; redeclaring let/const in the same scope throws a SyntaxError.