JavaScript var vs let: Key Differences

Understanding variables is the first step in learning JavaScript. Two keywords you will see often are var and let. They both store data. But they work very differently. This guide explains the key differences between JavaScript var vs let. You will learn about scope, hoisting, and redeclaration. We will use clear examples. By the end, you will know which keyword to use and why.

What is var?

var is the old way to declare variables in JavaScript. It has been around since the beginning. However, var has some tricky behaviors. It is function-scoped, not block-scoped. This means a var variable is available inside the whole function where it is declared. It is also hoisted to the top of its scope.

Here is an example of var:

 
// var is function-scoped
function exampleVar() {
    var x = 10;
    if (true) {
        var x = 20; // Same variable!
        console.log(x); // 20
    }
    console.log(x); // 20 (leaked outside block)
}
exampleVar();

20
20

Notice how the if block did not create a new scope. The var x inside the block overwrote the outer one. This can cause bugs. This is why many developers avoid var today.

For more details on all variable types, check our JavaScript Variable Types Guide.

What is let?

let was introduced in ES6 (2015). It fixes the problems of var. let is block-scoped. A block is any code between curly braces {}. This includes if, for, and while blocks. let also has different hoisting rules. It is hoisted but not initialized. This means you cannot use it before its declaration line.

Here is the same example with let:

 
// let is block-scoped
function exampleLet() {
    let y = 10;
    if (true) {
        let y = 20; // Different variable!
        console.log(y); // 20
    }
    console.log(y); // 10 (safe, no leak)
}
exampleLet();

20
10

Using let makes your code safer and easier to read. Each block gets its own variable. This prevents accidental overwrites.

Learn more about how scope works in our JavaScript Variable Scope Explained article.

Key Differences: var vs let

1. Scope

The biggest difference is scope. var uses function scope. let uses block scope. This affects where you can access the variable.

 
// Scope comparison
if (true) {
    var a = 1;
    let b = 2;
}
console.log(a); // 1 (accessible)
console.log(b); // ReferenceError: b is not defined

1
ReferenceError: b is not defined

2. Hoisting

Both var and let are hoisted. But they behave differently. var is hoisted and initialized with undefined. You can use it before its declaration line. let is hoisted but not initialized. It is in a "temporal dead zone" until the declaration.

 
// Hoisting example
console.log(c); // undefined (var hoisted)
var c = 5;

console.log(d); // ReferenceError (let in TDZ)
let d = 10;

undefined
ReferenceError: Cannot access 'd' before initialization

Always declare your variables at the top of their scope. This avoids confusion with hoisting.

3. Redeclaration

You can redeclare a var variable in the same scope. This can cause errors. let does not allow redeclaration in the same scope.

 
// Redeclaration
var e = 1;
var e = 2; // Works fine (bad practice)
console.log(e); // 2

let f = 1;
let f = 2; // SyntaxError: Identifier 'f' has already been declared

2
SyntaxError: Identifier 'f' has already been declared

4. Global Object Property

When you declare a var variable in the global scope, it becomes a property of the window object (in browsers). let does not.

 
// Global object
var g = "hello";
let h = "world";

console.log(window.g); // "hello"
console.log(window.h); // undefined

hello
undefined

This can be important for avoiding naming conflicts in large projects.

When to Use var vs let

In modern JavaScript, you should almost always use let. It is safer and more predictable. Use var only if you need to support very old browsers (like Internet Explorer 10). Even then, consider using a transpiler like Babel.

Best practice: Use let by default. Use const for values that should not change.

For a full overview of all variable keywords, read our JavaScript Variables Guide.

Common Mistakes with var and let

Beginners often make these mistakes:

• Using var inside loops: The variable leaks outside the loop block.
• Forgetting the temporal dead zone: Accessing a let variable before its declaration causes an error.
• Redeclaring variables:var allows it silently, which can overwrite important data.

Here is a loop example to show the difference:

 
// Loop with var (problematic)
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 (all refer to same i)

// Loop with let (correct)
for (let j = 0; j < 3; j++) {
    setTimeout(() => console.log(j), 100);
}
// Output: 0, 1, 2 (each iteration has its own j)

3
3
3
0
1
2

Using let in loops creates a new binding for each iteration. This is very useful for asynchronous code.

Conclusion

JavaScript var and let both store values. But they are not the same. var is function-scoped, hoisted with undefined, and allows redeclaration. let is block-scoped, has a temporal dead zone, and prevents redeclaration. For modern code, use let (or const) every time. It makes your code cleaner, safer, and easier to debug. Start using let today and avoid common bugs.