HomeAll ToolsCoursesBlogAbout
Beginner⏱️ 7 min📘 Topic 2 of 13

📦 JavaScript Variables Explained — var vs let vs const

Master JavaScript variables: var, let and const. Learn the differences, scoping rules, hoisting traps and the right one to choose — with examples and interview Q&A.

A variable is a labeled box you put a value into. JavaScript gives you three ways to declare one:

  • var — the old one (avoid)
  • let — when the value will change
  • const — when it won't be reassigned

🧠 Real-world analogy

Think of let as a whiteboard (rewritable), const as engraving (fixed), and var as a sticky note that mysteriously shows up before you wrote it (hoisting).

📏 The 3 differences that matter

  • Scope: let/const are block-scoped (live inside { }). var is function-scoped.
  • Hoisting: var hoists as undefined. let/const hoist but throw if accessed early (Temporal Dead Zone).
  • Reassignment: const can't be reassigned (but its contents can mutate if it's an object/array).

💡 Tip: Default to const. Use let only when you must reassign. Never use var in modern code.

💻 Code Examples

Block scope difference

if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError
Output:
1
ReferenceError: b is not defined

const with objects (mutable contents)

const user = { name: 'Sam' };
user.name = 'Alex';   // ✅ allowed
user = { name: 'Bo' }; // ❌ TypeError
Output:
user is { name: 'Alex' }, then TypeError on reassignment

Temporal Dead Zone

console.log(x); // ReferenceError
let x = 5;
Output:
ReferenceError: Cannot access 'x' before initialization

⚠️ Common Mistakes

  • Believing const makes the value immutable — it only locks the binding, not the object.
  • Using var inside loops and being surprised by leaked variables outside the loop.
  • Accessing let/const variables before their declaration (Temporal Dead Zone).

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.What's the difference between var, let and const?Beginner
var is function-scoped and hoisted as undefined. let and const are block-scoped and live in the TDZ until declared. const cannot be reassigned; let can. Default to const, use let when needed, avoid var.
Q2.What is the Temporal Dead Zone?Intermediate
The time between entering a scope and the let/const declaration being executed. Accessing the variable in that window throws a ReferenceError — unlike var, which would return undefined.
Q3.Does const make a value immutable?Intermediate
No. const prevents reassignment of the binding, not mutation of the value. `const arr = []; arr.push(1)` works fine. Use Object.freeze() for true immutability.
Q4.What is hoisting? Are let and const hoisted?Advanced
Hoisting is the engine moving declarations to the top of their scope at parse time. var is hoisted AND initialized to undefined. let/const are hoisted but NOT initialized — they sit in the TDZ until execution reaches the declaration line.
Q5.Why was `let` added when `var` already existed?Intermediate
var has gotchas — function scoping leaks variables out of blocks, and hoisting causes confusing bugs. let was introduced in ES6 to give predictable block-scoped behavior, matching most other languages.

🧠 Quick Summary

  • Use const by default, let when reassigning, never var.
  • const locks the binding, not the value — objects/arrays can still mutate.
  • let and const are block-scoped; var is function-scoped.
  • var hoists as undefined; let/const hoist into the TDZ.
  • Accessing let/const before declaration throws ReferenceError.