Introduction
JavaScript provides three ways to declare variables: var, let, and const. Although they look similar, they behave differently in terms of scope, hoisting, and reassignment. Choosing the right one improves code readability, prevents bugs, and aligns with modern JavaScript best practices.
Scope
Scope means the area in which a variable can be used.
var is function-scoped. This means if you declare a variable with var inside a function, it can be used anywhere in that function. But if you declare it inside a block (like an if statement), it will still leak outside the block.
let and const are block-scoped. This means they only exist inside the block where they are declared. If you create them inside { }, they cannot be accessed outside.
Example:
if (true) {
var a = 1;
let b = 2;
const c = 3;
}
console.log(a); // 1 accessible
console.log(b); // Error (not defined outside block)
console.log(c); // Error (not defined outside block)
👉 In modern JavaScript, let and const are safer because they stay inside the block where you define them.
Hoisting
Hoisting means JavaScript moves variable declarations to the top before running the code.
var is hoisted and initialized with undefined. You can use it before declaring, but it will give undefined.
let and const are hoisted too, but they are in something called the Temporal Dead Zone (TDZ). You cannot use them before declaring, or it will throw an error.
Example:
console.log(a); // undefined
var a = 10;
console.log(b); // Error (TDZ)
let b = 20;
console.log(c); // Error (TDZ)
const c = 30;
👉 Always declare variables before using them. It avoids confusion and errors.
Reassignment and Mutability
Reassignment means changing the value of a variable after declaring it.
var can be reassigned.
let can also be reassigned.
const cannot be reassigned, but if it holds an object or array, the content inside can still be changed.
Example:
let x = 5;
x = 10; // allowed
const y = 20;
// y = 25; Error: cannot reassign const
const obj = { name: "Alice" };
obj.name = "Bob"; // allowed, property changed
👉 Use const for values you don’t want to reassign. Use let when you know the value will change.
Redeclaration
Redeclaration means declaring the same variable name again in the same scope.
var allows redeclaration, which can cause bugs.
let does not allow redeclaration.
const also does not allow redeclaration.
Example:
var a = 1;
var a = 2; // allowed
let b = 3;
// let b = 4; Error
const c = 5;
// const c = 6; Error
👉 To avoid mistakes, prefer let and const.
When to Use Each
Use const (default choice):
If you don’t plan to change the variable’s value, use const. It makes your code safe and easier to read.
Use let:
If you know the value will change, like in loops or counters, use let.
Avoid var:
var is old and can cause confusing bugs because of its scope and hoisting. Use it only if you are fixing very old code.
Summary
In JavaScript, var, let, and const are used to declare variables, but they behave differently. var is function-scoped, allows redeclaration, and is hoisted with undefined, which often causes bugs. let and const are block-scoped, safer, and should be used in modern code. Use const by default for variables that don’t change, and let for variables that do. Avoid var unless you are working with old code. This approach keeps your code cleaner, safer, and easier to maintain.