Difference Between var and let in JavaScript

the let Keyword in JavaScript

The `let` keyword was introduced in ES6 (ECMAScript 2015) as a modern way to declare variables in JavaScript. Unlike `var`, `let` is block-scoped, which means it is only accessible within the block where it is defined. This makes `let` a safer & more predictable choice for variable declaration.  

Characteristics of let

1. Block Scope: Variables declared with let are only accessible within the block where they are defined.
    
2. No Hoisting Behavior: Although let is hoisted, it does not allow usage before declaration, which avoids potential bugs.
    
3. No Re-declaration in the Same Scope: You cannot declare the same variable using let within the same block scope.

Block Scope  

Block scope refers to the area within curly braces `{}`, such as inside an `if` statement, `for` loop, or any other block. A variable declared with `let` is only accessible within that block & any nested blocks.  

For example: 

function example() {  
    let x = 10;  
    if (true) {  
        let x = 20; // This is a new variable, separate from the outer x  
        console.log(x); 
    }  
    console.log(x); 
}  
example();  

You can also try this code with Online Javascript Compiler

Run Code

Output

20
10

In this example, the `x` declared inside the `if` block is a completely different variable from the `x` declared outside. This is because `let` creates a new scope for each block, preventing accidental overwriting of variables.  

No Hoisting (Temporal Dead Zone)  

Unlike `var`, variables declared with `let` are not hoisted in the same way. While the declaration is still moved to the top of the scope, the variable is not initialized until the line where it is declared. This period between the start of the scope & the declaration is called the Temporal Dead Zone (TDZ).  

For example:  

console.log(y); // ReferenceError: Cannot access 'y' before initialization  
let y = 5;  

You can also try this code with Online Javascript Compiler

Run Code

Here, trying to access `y` before its declaration results in a `ReferenceError`. This behavior helps catch errors early & makes your code more predictable.  

Re-declaration Restrictions  

Another key difference is that `let` does not allow re-declaration of the same variable within the same scope. This prevents accidental bugs caused by reusing variable names.  

For example:   

let z = 10;  
let z = 20; // SyntaxError: Identifier 'z' has already been declared  

You can also try this code with Online Javascript Compiler

Run Code

This restriction ensures that each variable name is unique within its scope, reducing the risk of conflicts.  

Example: Using let

function exampleLet() {
    // console.log(x);
    let x = 30;
    console.log(x); 
    if (true) {
        let y = 40; // `y` is limited to this block
        console.log(y); 
    }
    // console.log(y); 
}
exampleLet();

You can also try this code with Online Javascript Compiler

Run Code

Output

Error: Cannot access 'x' before initialization
30
40
Error: `y` is not defined outside the block

Practical Use Case  

`let` is particularly useful in loops. For example, in a `for` loop, using `let` ensures that the loop variable is scoped to the block of the loop:  

for (let i = 0; i < 3; i++) {  
    console.log(i); 
}  
console.log(i);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

0, 1, 2  
ReferenceError: i is not defined  

Here, the variable `i` is only accessible inside the `for` loop. If you had used `var`, `i` would still be accessible outside the loop, which could lead to unintended behavior.  

Understanding the Differences in a Tabular Form

The following table highlights the key differences between var and let:

Examples: Comparing var and let

Example 1: Hoisting Behavior

console.log(varVariable);
var varVariable = 50;


// console.log(letVariable);
let letVariable = 60;

You can also try this code with Online Javascript Compiler

Run Code

Output

undefined
Error: Cannot access 'letVariable' before initialization

In this example, varVariable is accessible before declaration due to hoisting, whereas letVariable is not.

Example 2: Block Scope

if (true) {
    var varScoped = "I'm a var variable";
    let letScoped = "I'm a let variable";
}
console.log(varScoped); 
// console.log(letScoped);

You can also try this code with Online Javascript Compiler

Run Code

Output

I'm a var variable
Error: letScoped is not defined

Here, the var variable is accessible outside the block, but the let variable is restricted to the block.

Frequently Asked Questions

Can I use var in modern JavaScript development?

Yes, you can use var, but it is not recommended for new projects. let and const provide better control over variable scope and help avoid common bugs.

When should I use let instead of var?

Always prefer let (or const for constants) when declaring variables in modern JavaScript. It provides block-level scoping and prevents issues related to hoisting and re-declaration.

What happens if I try to redeclare a let variable?

JavaScript will throw a syntax error if you attempt to redeclare a let variable in the same block scope.

Conclusion

In this article, we discussed the differences between var and let in JavaScript. While var is an older way to declare variables, it has limitations like function scope and hoisting-related issues. On the other hand, let provides a more robust and predictable behavior with block-level scoping and strict rules against re-declaration. 

You can also check out our other blogs on Code360.