What Is the Difference Between “let” and “var” in JavaScript?
JavaScript has evolved significantly over the years, and one of the most important updates came with the release of ES6 (ECMAScript 2015). Before ES6, developers primarily used the var keyword to declare variables. After ES6, let and const were introduced to improve how variables behave in terms of scope and reliability.
Understanding the difference between let and var is crucial for writing clean, bug-free JavaScript code. In this article, we will explore their differences in detail, including scope, hoisting, redeclaration, and best practices.
difference between let and var
Introduction to var
var is the original way to declare variables in JavaScript. It has been part of the language since its beginning.
Example:
var message = "Hello World";
console.log(message);
While var works, it has certain behaviors that can lead to unexpected bugs—especially in large applications.
Introduction to let
let was introduced in ES6 (ECMAScript 2015) as a modern alternative to var. It fixes many of the issues associated with var, especially around variable scope and redeclaration.
Example:
let message = "Hello World";
console.log(message);
Although both look similar, their behavior is quite different.
1. Scope Difference: Function Scope vs Block Scope
This is the most important difference between var and let.
var → Function Scoped
A variable declared with var is accessible throughout the entire function in which it is declared.
function example() {
if (true) {
var x = 10;
}
console.log(x); // 10
}
Even though x is declared inside the if block, it is accessible outside the block because var ignores block scope.
let → Block Scoped
A variable declared with let is only accessible within the block {} where it is defined.
function example() {
if (true) {
let y = 20;
}
console.log(y); // Error
}
Here, y is not accessible outside the if block. This prevents accidental bugs and improves code safety.
2. Hoisting Behavior
Both var and let are hoisted, but they behave differently.
var Hoisting
Variables declared with var are hoisted to the top of their function and initialized with undefined.
console.log(a); // undefined
var a = 5;
JavaScript internally treats it like this:
var a;
console.log(a);
a = 5;
This can lead to confusing bugs.
let Hoisting
let is also hoisted, but it is not initialized. It remains in a “Temporal Dead Zone” (TDZ) until the declaration line is executed.
console.log(b); // ReferenceError
let b = 10;
This prevents accidental usage before declaration.
3. Redeclaration Rules
var Allows Redeclaration
var name = "John";
var name = "Mike"; // No error
This can cause accidental overwriting of variables.
let Does NOT Allow Redeclaration in the Same Scope
let name = "John";
let name = "Mike"; // SyntaxError
This makes your code safer and easier to debug.
4. Global Object Behavior
When you declare a variable using var in the global scope, it becomes a property of the global object (window in browsers).
var test = "Hello";
console.log(window.test); // "Hello"
But with let, this does not happen:
let test2 = "Hi";
console.log(window.test2); // undefined
This helps avoid polluting the global namespace.
5. Use Inside Loops
One of the biggest problems with var appears in loops.
Using var in Loop
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
Output:
3
3
3
Because var is function-scoped, the same i variable is shared.
Using let in Loop
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
Output:
0
1
2
Each iteration creates a new block-scoped variable.
6. When Should You Use let vs var?
Modern JavaScript best practices recommend:
- ✅ Use
letfor variables that change. - ✅ Use
constfor variables that should not change. - ❌ Avoid
varin modern development.
Most professional developers today do not use var unless maintaining legacy code.
Quick Comparison Table
| Feature | var | let |
|---|---|---|
| Scope | Function scoped | Block scoped |
| Hoisting | Yes (initialized as undefined) | Yes (TDZ, not initialized) |
| Redeclaration | Allowed | Not allowed in same scope |
| Global Object | Becomes property | Does not become property |
| Loop Behavior | Problematic | Safe |
Real-World Example
Consider a login system:
if (userLoggedIn) {
var status = "Welcome!";
}
console.log(status);
Even if the block was conditional, status exists outside the block.
With let:
if (userLoggedIn) {
let status = "Welcome!";
}
console.log(status); // Error
This prevents unintended access and improves security.
Why let Is Safer
let helps prevent:
- Accidental overwriting
- Variable leakage outside blocks
- Confusing hoisting bugs
- Loop closure problems
Because of this, modern frameworks like React, Angular, and Vue rely heavily on let and const.
Conclusion
The difference between let and var comes down to scope, hoisting behavior, and redeclaration rules.
While var is function-scoped and can lead to unexpected behavior, let is block-scoped and designed to reduce bugs. In modern JavaScript development, let (and const) are the preferred ways to declare variables.
If you’re learning JavaScript today, focus on mastering Learn the key difference between let and var in JavaScript, including scope, hoisting, redeclaration rules, and why let is preferred in modern coding.
, and treat var as part of legacy JavaScript.
Understanding this Learn the key difference between let and var in JavaScript, including scope, hoisting, redeclaration rules, and why let is preferred in modern coding.
will help you write cleaner, safer, and more maintainable code.
Want to learn more about javascript??, kaashiv Infotech Offers Front End Development Course, Full Stack Development Course, & More www.kaashivinfotech.com.
Related Reads:
