var vs let vs const

JavaScript's variable declaration evolution

JavaScript has three ways to declare variables: var (the original), let and const (introduced in ES6/2015). The newer keywords fix confusing behaviors of var, particularly around scoping and hoisting, and have become the standard for modern JavaScript.

var

var is JavaScript's original variable declaration keyword, present since the language's creation in 1995. Variables declared with var are function-scoped (or globally scoped if declared outside a function), not block-scoped. This means a var inside an if block or for loop is accessible outside that block, which is unintuitive for developers coming from other languages. var declarations are also hoisted to the top of their function — the variable exists from the start of the function but is undefined until the assignment line. var allows redeclaration of the same variable name without error, which can mask bugs. These quirks made JavaScript's scoping one of its most confusing aspects.

let / const

let and const were introduced in ES6 (2015) to provide block-scoped variable declarations. Both are scoped to the nearest enclosing block (if, for, while, or bare {}), behaving like variables in most other languages. let allows reassignment; const prevents it (though const objects and arrays can still have their contents mutated). Both are hoisted but enter a 'temporal dead zone' — accessing them before declaration throws a ReferenceError instead of returning undefined. Neither allows redeclaration in the same scope. The modern convention is to use const by default and let only when reassignment is needed. var is considered legacy.

Key Differences

- **Scoping**: var is function-scoped. let and const are block-scoped (the nearest {} boundary). - **Hoisting**: var is hoisted and initialized as undefined. let/const are hoisted but remain in the 'temporal dead zone' until their declaration line. - **Redeclaration**: var allows declaring the same variable twice. let/const throw a SyntaxError on redeclaration. - **Reassignment**: var and let allow reassignment. const prevents reassignment (but not mutation of objects/arrays). - **Global object**: var at the top level attaches to the window object. let/const do not. - **Loop behavior**: var in a for loop shares one variable across iterations (classic closure bug). let creates a new binding per iteration.

When to Use Each

**Use const** as your default for every variable. Most variables don't need reassignment, and const communicates that intent clearly. Objects and arrays declared with const can still be modified — const only prevents reassigning the variable itself. **Use let** when you genuinely need to reassign a variable: loop counters, accumulators, conditionally assigned values, or swap operations. **Avoid var** in new code. There's no scenario where var is preferable to let/const. It exists only for backward compatibility with pre-ES6 code.

Analogy

**var** is like writing your name on a whiteboard visible to the whole room (function scope) — everyone can see and change it, and even if you write it inside a box drawn on the whiteboard, it's still visible to the whole room. **let** is like writing your name on a sticky note attached to a specific section of the whiteboard (block scope) — only people in that section see it, and you can erase and rewrite it. **const** is like writing your name with a permanent marker on that sticky note — it stays in its section, and once written, you can't overwrite it with a different name.