The let keyword was introduced in ES6 (2015)
Variables declared with let have Block Scope
Variables declared with let must be Declared before use
Variables declared with let cannot be Redeclared in the same scope
Block Scope
Before ES6 (2015), JavaScript did not have Block Scope .
JavaScript had Global Scope and Function Scope .
ES6 introduced the two new JavaScript keywords: let and const .
These two keywords provided Block Scope in JavaScript:
Example
Variables declared inside a { } block cannot be accessed from outside the block:
{
let x = 2;
}
// x can NOT be used hereFunction Scope
Inside a function all variables declared with var , let or const have Function Scope :
Example
function myfunction() {
var x = 1;
let y = 2;
const z = 3;
}
//x can NOT be used here
//y can NOT be used here
//z can NOT be used hereGlobal Scope
Variables declared with the var always have Global Scope .
Variables declared with the var keyword can NOT have block scope:
Example
Variables declared with var inside a { } block can be accessed from outside the block:
{
var x = 2;
}
// x CAN be used hereCannot be Redeclared
Variables defined with let can not be redeclared.
You can not accidentally redeclare a variable declared with let .
With let you can not do this:
let x = "John Doe";
let x = 0;Variables defined with var can be redeclared.
With var you can do this
var x = "John Doe";
var x = 0;Redeclaring Variables
Redeclaring a variable using the var keyword can impose problems.
Redeclaring a variable inside a block will also redeclare the variable outside the block:
Example
var x = 10;
// Here x is 10 { var x = 2; // Here x is 2
}
// Here x is 2Redeclaring a variable using the let keyword can solve this problem.
Redeclaring a variable inside a block will not redeclare the variable outside the block:
Example
let x = 10;
// Here x is 10 {
let x = 2;
// Here x is 2
}
// Here x is 10Difference Between var, let and const
| Scope | Redeclare | Reassign | Hoisted | Binds this | |
|---|---|---|---|---|---|
| var | No | Yes | Yes | Yes | Yes |
| let | Yes | No | Yes | No | No |
| const | Yes | No | No | No | No |
What is Good?
let and const have block scope .
let and const can not be redeclared .
let and const must be declared before use.
let and const does not bind to this .
let and const are not hoisted .
What is Not Good?
var does not have to be declared.
var is hoisted.
var binds to this.
Browser Support
The let and const keywords are not supported in Internet Explorer 11 or earlier.
The following table defines the first browser versions with full support:
| Chrome 49 | Edge 12 | Firefox 36 | Safari 11 | Opera 36 |
|---|---|---|---|---|
| Mar, 2016 | Jul, 2015 | Jan, 2015 | Sep, 2017 | Mar, 2016 |
Redeclaring
Redeclaring a JavaScript variable with var is allowed anywhere in a program:
Example
var x = 2;
// Now x is 2 var x = 3; // Now x is 3With let , redeclaring a variable in the same block is NOT allowed:
Example
var x = 2; // Allowed
let x = 3; // Not allowed
{
let x = 2; // Allowed
let x = 3; // Not allowed
}
{
let x = 2; // Allowed
var x = 3; // Not allowed
}Redeclaring a variable with let , in another block, IS allowed:
Example
let x = 2; // Allowed {
let x = 3; // Allowed
} {
let x = 4; // Allowed
}Let Hoisting
Meaning: You can use the variable before it is declared:
Example
carName = "Volvo";
var carName;Variables defined with let are also hoisted to the top of the block, but not initialized.
Meaning: Using a let variable before it is declared will result in a ReferenceError :
Example
carName = "Saab";
let carName = "Volvo";