Var, Let, and Const in JavaScript
Definition: In JavaScript, var, let, and const are used to declare variables, but they differ in scope, hoisting behavior, and reassignment rules. Understanding these differences helps you write cleaner and more predictable code.
1. var — The Old Way
The var keyword has been part of JavaScript since the beginning. It declares a variable that is function-scoped (not block-scoped) and can be re-declared or updated within the same scope.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// var is function-scoped function example() { var message = "Hello"; if (true) { var message = "Hi"; // same variable (not block-scoped) console.log(message); // Hi } console.log(message); // Hi } example(); // var allows redeclaration var a = 10; var a = 20; // ✅ valid console.log(a); // 20 |
Hoisting Behavior: Variables declared with var are hoisted and initialized as undefined. You can access them before declaration, but they won’t have a defined value.
|
1 2 3 4 |
console.log(x); // undefined var x = 5; |
2. let — The Modern, Block-Scoped Variable
Introduced in ES6 (ECMAScript 2015), let provides block scope, meaning the variable is accessible only within the nearest set of curly braces ({}).
|
1 2 3 4 5 6 7 8 9 10 11 |
function test() { let count = 1; if (true) { let count = 2; // different variable (block-scoped) console.log("Inside block:", count); // 2 } console.log("Outside block:", count); // 1 } test(); |
Hoisting Behavior: Variables declared with let are hoisted but remain in the Temporal Dead Zone (TDZ) until initialized. Accessing them before declaration throws a ReferenceError.
|
1 2 3 4 |
console.log(num); // ❌ ReferenceError let num = 100; |
Redeclaration: let does not allow redeclaration within the same scope, but reassignment is allowed.
|
1 2 3 4 5 |
let age = 25; age = 26; // ✅ allowed let age = 30; // ❌ SyntaxError: Identifier 'age' has already been declared |
3. const — The Immutable Reference
const is also block-scoped like let, but it must be initialized at the time of declaration and cannot be reassigned.
|
1 2 3 4 |
const name = "Shubham"; name = "DevPoint"; // ❌ TypeError: Assignment to constant variable |
However, note that const only prevents reassignment of the variable itself, not changes to the contents of objects or arrays.
|
1 2 3 4 5 6 7 |
const user = { name: "Alice", age: 25 }; user.age = 26; // ✅ allowed (object properties can change) console.log(user); // { name: "Alice", age: 26 } user = {}; // ❌ TypeError (cannot reassign variable reference) |
4. Scope Differences Summary
Here’s a visual summary of how these variables behave inside different scopes:
|
1 2 3 4 5 6 7 8 9 10 |
if (true) { var x = 1; // function/global scope let y = 2; // block scope const z = 3; // block scope } console.log(x); // ✅ 1 (var is global or function scoped) console.log(y); // ❌ ReferenceError (block-scoped) console.log(z); // ❌ ReferenceError (block-scoped) |
5. Comparison Table
| Feature | var |
let |
const |
|---|---|---|---|
| Scope | Function-scoped | Block-scoped | Block-scoped |
| Hoisting | Yes (initialized as undefined) |
Yes (TDZ until initialization) | Yes (TDZ until initialization) |
| Redeclaration | Allowed | Not allowed | Not allowed |
| Reassignment | Allowed | Allowed | Not allowed |
| Initialization Required | No | No | Yes |
6. Best Practices & Interview Tips
- Always prefer
constfor variables that won’t be reassigned. - Use
letfor variables whose values will change. - Avoid
varunless working with legacy code — it can cause unexpected behavior due to hoisting and function scoping. - In interviews, emphasize that
constdoes not make data immutable — only the variable reference.
Example: Real-World Use Case
Here’s a small example that combines all three in one block:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function userInfo() { var greeting = "Hello"; // Function scoped let name = "Shubham"; // Block scoped const age = 25; // Constant reference if (true) { var greeting = "Hi"; // Affects outer variable let name = "Rahul"; // New variable (block scope) console.log(greeting, name, age); // Hi Rahul 25 } console.log(greeting, name, age); // Hi Shubham 25 } userInfo(); |
Output:
|
1 2 3 4 |
Hi Rahul 25 Hi Shubham 25 |
Key Takeaways
var— Function-scoped, hoisted, can be re-declared.let— Block-scoped, cannot be re-declared, can be reassigned.const— Block-scoped, cannot be re-declared or reassigned.- Prefer
letandconstin modern JavaScript for clean and safe code.
In short: var belongs to the old days of JavaScript; let and const bring structure, safety, and clarity to variable management in modern applications.