JavaScript let Vs var

In JavaScript, both the keywords var and let are used to declare variables.

The let keyword was introduced in the later version of JavaScript known as ES6(ES2015). And it's the preferred way to declare variables.

JavaScript let Vs var

Here's the overview of the differences between let and var.

JavaScript let Vs var in Local Scope

var is function scoped

The variable declared inside a function with var can be used anywhere within a function. For example,

// program to print text
// variable a cannot be used here
function greet() {
    // variable a can be used here
    var a = 'hello';
    console.log(a);
}
// variable a cannot be used here

greet(); // hello

In the above program, the variable a is declared with var. The variable a can be used anywhere inside the function greet.

let is block-scoped

The variable declared with let can only be accessed inside a block of code. For example,

// program to print the text
// variable a cannot be used here
function greet() {
    let a = 'hello';

    // variable b cannot be used here
    if(a == 'hello'){
        // variable b can be used here
        let b = 'world';
        console.log(a + ' ' + b);
    }

     // variable b cannot be used here
    console.log(a + ' ' + b); // error
}
// variable a cannot be used here

greet();

Output

hello world
Uncaught ReferenceError: b is not defined

In the above program, the variable a is declared inside the function and it can be accessed anywhere inside the function (a becomes function scoped).

However the variable b is declared inside the if block statement. b will be block-scoped and can only be accessed inside the if block.

Hence when you try to access b outside of if block, an error occurs (as shown above in the program).

Note: The variables declared inside a function will be function scoped for both var and let.

let doesn't allow to redeclare Variables

1. A variable declared with var can be redeclared again. For example,

var a = 5; // 5
var a = 3; // 3

A variable declared with let cannot be redeclared within the same block or same scope. For example,

let a = 5;
let a = 3; // error 

Output

Uncaught SyntaxError: Identifier 'a' has already been declared

2. Redeclaring a variable with var in a different scope or block changes the value of the outer variable too. For example,

var a = 5;
console.log(a); // 5
{
    var a = 3;
    console.log(a); // 3
}
console.log(a); // 3

Redeclaring a variable with let in a different scope or block treats that variable as a different variable. And the value of a variable outside does not change. For example,

let a = 5;
console.log(a); // 5
{
    let a = 3;
    console.log(a); // 3
}
console.log(a); // 5

3. When a variable declared with var is used in a loop, the value of that variable changes. For example,

var a = 2;
for(var a = 0; a < 3; a++) {
    console.log('hello');
}
console.log(a); // 3

In the above program, the for loop redeclares the variable a. Hence the value of a is changed to 3 at the end.

When a variable declared with let is used in a loop, the value of a variable does not change. For example,

let a = 2;
for(let a = 0; a < 3; a++) {
    console.log('hello');
}
console.log(a); // 2

In the above program, for loop treats variable a as a different variable than the one declared above. And the scope of that variable is only inside the for loop. Hence the value of variable a remains 2 at the end.

let Doesn't Allow Hoisting

The variables declared with var are hoisted to the top of the scope of the program. For example,

console.log(a);
var a; // undefined (not an error)

The keyword let does not allow hoisting. For example,

console.log(a);
let a; // Uncaught ReferenceError: a is not defined

If you want to learn more about hoisting, visit JavaScript Hoisting.

let and var Browser Support

Most of the modern browsers support the use of let. However, some browsers do not fully support let.

To learn more, visit JavaScript let browser support.

var a = 5; // 5

let a = 5; // 5