Variables: var, let, const0%
Data Types

Variables: var, let, const

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Variables: var, let, const

A variable is a named storage container in memory used to hold data values that your program can read, manipulate, and update. In modern JavaScript (ES6+), choosing the correct variable declaration keyword (const, let, or var) is fundamental to writing predictable, bug-free code.

1. Evolution of Variable Declarations

Output
1995 - 2015: Only `var` existed.
Features: Function-scoped, hoisted with undefined, allows re-declaration.
Flaw: Accidental variable leaks, scoping bugs in loops.
|
v
2015 (ES6): Introduced `let` and `const`.
Features: Block-scoped `{ ... }`, temporal dead zone, no re-declaration.
Standard: `const` by default; `let` when reassignment is needed. Never use `var`!

2. The Big Three: var vs let vs const

Featurevar (Legacy)let (Modern Mutable)const (Modern Constant)
ScopeFunction ScopeBlock Scope { }Block Scope { }
Reassignable?YesYesNo (TypeError)
Re-declarable in same scope?Yes (Accidental overwrites!)No (SyntaxError)No (SyntaxError)
Must initialize on declaration?NoNoYes (Must give value!)
Hoisting BehaviorHoisted with undefinedHoisted into Temporal Dead Zone (TDZ)Hoisted into Temporal Dead Zone (TDZ)

3. Scope Mechanics: Function Scope vs. Block Scope

A block in JavaScript is any code enclosed within curly braces { ... } (such as if conditions, for loops, or standalone blocks).

The Danger of var Leaking:

JavaScript
if (true) {
var role = "Admin";
}
console.log(role); // "Admin" - Leaked outside the block! var ignores block boundaries!

The Safety of let and const:

JavaScript
if (true) {
let user = "Sumit";
const age = 25;
}
console.log(user); // ReferenceError: user is not defined!
console.log(age); // ReferenceError: age is not defined!

4. Reassignment: let vs. const

Use let when values must change:

JavaScript
let score = 0;
score = 10; // Valid reassignment!
score += 5; // score is now 15

Use const for values that should NOT be reassigned:

JavaScript
const API_URL = "https://api.mskinstitute.com/v1";
API_URL = "https://other.com"; // TypeError: Assignment to constant variable!

Critical Nuance: const with Objects and Arrays

const prevents reassigning the variable identifier binding, but does not make the internal contents of an object or array immutable!

JavaScript
const student = { name: "Sumit", marks: 95 };
 
// Mutating object properties is 100% VALID:
student.marks = 98;
student.city = "Delhi";
console.log(student); // { name: "Sumit", marks: 98, city: "Delhi" }
 
// Reassigning the variable itself throws an ERROR:
student = { name: "Other" }; // TypeError: Assignment to constant variable!

5. Hoisting and the Temporal Dead Zone (TDZ)

Hoisting is JavaScript's default behavior of moving variable and function declarations to the top of their scope before code execution.

  • With var: Variables are hoisted and initialized with undefined:
JavaScript
console.log(x); // undefined (No error, but confusing!)
var x = 10;
  • With let and const: Variables are hoisted, but remain in the Temporal Dead Zone (TDZ) until the line of declaration is reached:
JavaScript
console.log(y); // ReferenceError: Cannot access 'y' before initialization!
let y = 20;

6. Industry Golden Rule: 90/10 Rule

Top engineering teams follow the 90/10 Rule:

  1. 1
    Use const for 90% of your variables by default (objects, arrays, functions, constants).
  2. 2
    Use let only when you know the variable will be reassigned (loop counters, toggles, accumulating scores).
  3. 3
    Never use var in modern codebases.
Interactive Quiz

Practice Quiz

Question 1
What type of scope do let and const have?
Question 2
What happens if you attempt to reassign a variable declared with const?
Question 3
Can you modify the properties of an object declared with const (e.g. const user = { name: "Alex" }; user.name = "Sam";)?
Question 4
What is the "Temporal Dead Zone" (TDZ) in JavaScript?
Question 5
Why is var avoided in modern JavaScript development?
Next Lesson

Data Types

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Setting up Environment: VSCode, Live ServerData Types

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext