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
.
let is block-scoped. | var is function scoped. |
let does not allow to redeclare variables. | var allows to redeclare variables. |
Hoisting does not occur in let. | Hoisting occurs in 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.
Note: In case of global scope, both var
and let
will behave in the same way. For example,
var a = 5; // 5
The variable a will be global scoped and can be accessed anywhere in the program.
let a = 5; // 5
The variable a will be global scoped and can be accessed anywhere in the program.