1: Variable scopes
The var variables belong to the global scope or local scope if they are declared inside a function:
The let variables are blocked scopes:
2: Creating global properties
The global var variables are added to the global object as properties. The global object is window on the web browser and global on Node.js:
var counter = 0;
console.log(window.counter); // 0
However, the let variables are not added to the global object:
let counter = 0;
console.log(window.counter); // undefined
The var keyword allows you to redeclare a variable without any issue.
var counter = 10;
console.log(counter); // 10
If you redeclare a variable with the let keyword, you will get an error:
let counter = 10;
let counter; // error
4: The Temporal dead zone
The let variables have temporal dead zones while the var variables don’t. To understand the temporal dead zone, let’s examine the life cycles of both var and let variables, which have two steps: creation and execution.
The var variables
· In the creation phase, the var variables are assigned storage spaces and immediately initialized to undefined.
· In the execution phase, the var variables are assigned the values specified by the assignments if there are ones. If there aren’t, the values of the variables remain undefined.
The let variables
· In the creation phase, the let variables are assigned storage spaces but are not initialized. Referencing uninitialized variables will cause a ReferenceError.
· The let variables have the same execution phase as the var variables.
The temporal dead zone starts from the block until the let variable declaration is processed. In other words, it is where you cannot access the let variables before they are defined.