In this blog post, we’ll dive deep into var vs let, examining their differences, use cases, and the implications of choosing one over the other.
Understanding var
The var keyword has been around since the beginning of JavaScript and was traditionally used to declare variables.
javascript
CopyEdit
var name = "John";
Characteristics of var:
Function Scope:
var is function-scoped, which means a variable declared using var is accessible throughout the function in which it’s declared.
javascript
CopyEdit
function greet() {
if (true) {
var greeting = "Hello";
}
console.log(greeting); // Output: Hello
}
Hoisting:
Variables declared with var are hoisted to the top of their scope. However, the declaration is hoisted, not the initialization.
javascript
CopyEdit
console.log(age); // Output: undefined
var age = 30;
Allows Redeclaration:
You can redeclare a variable with var in the same scope without any error.
javascript
CopyEdit
var city = "Paris";
var city = "London"; // No error
Understanding let
The let keyword was introduced in ES6 and offers better scoping and control over variables.
javascript
CopyEdit
let name = "Jane";
Characteristics of let:
Block Scope:
let is block-scoped, meaning it’s only accessible within the nearest enclosing {} block.
javascript
CopyEdit
if (true) {
let message = "Hi there";
console.log(message); // Output: Hi there
}
console.log(message); // ReferenceError: message is not defined
No Hoisting (in practice):
let declarations are hoisted but are not initialized. Accessing them before declaration results in a ReferenceError due to the Temporal Dead Zone (TDZ).
javascript
CopyEdit
console.log(score); // ReferenceError
let score = 100;
No Redeclaration in the Same Scope:
You cannot redeclare a variable using let in the same block scope.
javascript
CopyEdit
let country = "India";
let country = "USA"; // SyntaxError: Identifier 'country' has already been declared
Var vs Let: Key Differences
| Feature | var | let |
| Scope | Function-scoped | Block-scoped |
| Hoisting | Hoisted (initialized with undefined) | Hoisted (not initialized – TDZ) |
| Redeclaration | Allowed in the same scope | Not allowed in the same scope |
| Global Object Property | Becomes a property of window in browsers | Does not become a property of window |
Example:
javascript
CopyEdit
function example() {
var x = 1;
let y = 2;
if (true) {
var x = 10; // Same variable (function scope)
let y = 20; // New variable (block scope)
console.log(x); // 10
console.log(y); // 20
}
console.log(x); // 10
console.log(y); // 2
}
As you can see, var affects the entire function, while let is limited to the block.
When to Use let Over var
In modern JavaScript development, let is preferred over var due to its predictable scoping behavior. Here’s why you should consider using let:
- Avoids accidental redeclarations: Reduces bugs caused by reusing variable names unintentionally.
- Reduces side effects: Scoped to the block, so it's less likely to be affected by external logic.
- Better for loops: Especially when using closures inside loops.
Example with Closures:
javascript
CopyEdit
// Using var
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1000); // Logs 3, 3, 3
}
// Using let
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1000); // Logs 0, 1, 2
}
This behavior happens because let creates a new binding for each iteration of the loop.
Should You Ever Use var?
In modern development, there are very few legitimate reasons to use var. However, you might encounter it in:
- Legacy codebases that haven’t been updated to ES6 standards.
- Global declarations in environments where var is expected (like certain older libraries or polyfills).
- When function scope is actually desired (though rare).
But in most scenarios, using let (or even better, const for constants) is the safer and more readable approach.
Conclusion
Understanding the difference between var and let is essential for writing clean and predictable JavaScript code. While var was a staple in pre-ES6 JavaScript, its quirks—like function scoping and hoisting—often led to bugs and confusion.
On the other hand, let offers block-level scoping, stricter rules, and overall more manageable behavior. As a result, most modern JavaScript codebases now favor let over var for variable declarations.
Next time you're declaring a variable, remember this: unless you're maintaining legacy code or have a specific reason, stick to let (or const when the value doesn’t change). It’ll make your code safer, cleaner, and more in line with modern best practices.
Read more on- https://keploy.io/blog/community/javascript-var-vs-let-vs-const