JavaScript var let and const
Difference Between var, let and const
The primary difference between var, let,
and const lies in scoping mechanisms, reassignment rules, and how JavaScript handles
them via hoisting.
| Scope | Redeclare | Reassign | Hoisted | NOTE | |
|---|---|---|---|---|---|
| var | No | Yes | Yes | Yes | Undefined |
| let | Yes | No | Yes | Yes | Not initialized |
| const | Yes | No | No | Yes | Not initialized |
Variables declared with var are hoisted but initialized with undefined.
Variables declared with let and const are also hoisted,
but not initialized.
Using a let or const variable before it is declared will
result in a ReferenceError.
The time between the start of the block and the declaration is called the Temporal Dead Zone.
What is Not Good?
var does not have to be declared.
var is hoisted.
var binds to this.
Modern JavaScript standards recommend avoiding var entirely to minimize unintentional bugs.
Scope Rules
var is function-scoped:
If you declare a var variable inside a loop or an if block,
it "leaks out" and is accessible anywhere outside the block.
let and const are block-scoped:
They are confined strictly to the nearest pair of curly braces {} (such as loops, functions, or conditional blocks).
As a rule of thumb, you should use const by default, and only use let when you have to reassign the
variable after initialization.
You should avoid using var.
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function or global scope | Block-scope { } | Block-scope { } |
| Reassignment | Can be updated | Can be updated | Cannot be updated |
| Redeclaration | Can be redeclared | Cannot be redeclared | Cannot be redeclared |
| Hoisting | Initialized as undefined | Hoisted, not initialized | Hoisted, not initialized |
What is Good?
let and const
have block scope.
let and const
can not be redeclared.
let and const
must be declared before use.
let and const
does not bind to this.
let and const
are not hoisted.
Example
if (true) {
var firstName = "John";
let lastName = "Doe";
}
let text1 = text2 = "unknown";
if (typeof firstName !== "undefined") text1 = firstName;
if (typeof lastName !== "undefined") text2 = lastName;
Try it Yourself »
Reassignment vs. Redeclaration
var allows you to accidentally re-declare the exact same variable name in the same scope, silently overwriting earlier values.
let can be updated/reassigned, but it throws an error if you attempt to re-declare it within the same scope.
const is strictly read-only. It requires an initial value immediately upon declaration and cannot be reassigned later.
Note on const objects:
You cannot reassign a const variable with a completely new value,
you can still change the properties of an object or array declared with const.
Example
// Create user object
const user = { name: "Alice" };
// This will work
user.name = "Bob";
let text = user.name + " ";
// This will not work
try {
user = { name: "Charlie" };
text += user.name;
} catch(err) {
text += err;
}
Try it Yourself »
Hoisting and the Temporal Dead Zone (TDZ)
All variables are hoisted to the top of their scope by the JavaScript engine, but they are treated differently:
var variables are hoisted and automatically assigned a default value of undefined. You can reference them before they are declared in the code without breaking the application.
let and const are hoisted but remain completely uninitialized. The region of code from the start of the block until the line they are declared is called the Temporal Dead Zone. Accessing them here instantly crashes with a ReferenceError.
Best Practice
Developers should follow these guidelines for modern JavaScript (ES6 - 2015+):
Always use const by default.
It prevents accidental reassignments and makes your code more predictable.
Only use let when:
You know its value needs to change later (inside a loop or a mathematical counter).
Never use var.
Its unpredictable scoping and the redeclaration rules are known to cause bugs.
