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 let for variables that change.
• ✅ Use const for variables that should not change.
• ❌ Avoid var in 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:

• Java vs JavaScript: 3 Key Differences Every Developer Must Know
• JavaScript 2D Array – Two Dimensional Arrays in JS