JS Let
ES6 (2015) saw the introduction of the let keyword.
Variables declared with let have Block Scope
Before being used, variables declared with let must be declared.
Variables declared with let cannot be Redeclared in the same scope
Block Scope
Block Scope was absent from JavaScript prior to ES6 (2015).
JavaScript included both Function Scope and global scope.
The two new JavaScript keywords, let and const were introduced with ES6.
In JavaScript, Block Scope was supplied by these two keywords:
Example
Variables declared inside a { } block cannot be accessed from outside the block:
{
let x = 2;
}
// x can NOT be used here
Global Scope
Global Scope is always present for variables specified using the var.
Block scope is not allowed for variables declared with the var keyword:
Example
Variables declared with var inside a { } block can be accessed from outside the block:
{
var x = 2;
}
// x CAN be used here
Cannot be Redeclared
Variables defined with let cannot be redeclared.
You can not mistakenly redeclare a variable declared with let.
With let you cannot do this:
let x = "John Doe";
let x = 0;
Redeclaring variables defined using var is possible.
With var you can do this:
var x = "John Doe";
var x = 0;
Redeclaring Variables
Issues may arise when a variable is redeclared with the var keyword.
Redefining a variable inside a block will also result in the outside variable being redeclared as well:
Example
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
This issue can be solved by using the let keyword to redeclare a variable.
A variable inside a block will not be redeclared outside the block if it is redeclared inside:
Example
let x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10
Difference 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
Internet Explorer 11 and below does not support the let and const keywords.
The earliest browser versions with complete support are listed in the following table:
Redeclaring
Anywhere in a program, a JavaScript variable can be redeclared using var:
Example
var x = 2;
// Now x is 2
var x = 3;
// Now x is 3
Redeclaring a variable with let within the same block is not permitted:
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
}
It is acceptable to redeclare a variable with let in a different block:
Example
let x = 2; // Allowed
{
let x = 3; // Allowed
}
{
let x = 4; // Allowed
}
Let Hoisting
Variables that are initialized at any point and are specified with var are pushed to the top.
Meaning: The variable is usable even before it is stated.
Example
This is OK:
carName = "Volvo";
var carName;
Go over the chapter on JavaScript Hoisting to understand more about hoisting.
Let-defined variables are likewise elevated to the top of the block, but they are not initialized.
Meaning: A ReferenceError happens if a let variable is used before it is declared.
Example
carName = "Saab";
let carName = "Volvo";
