'let' vs 'var': What is the Actual Difference?
https://javascript.plainenglish.io/let-vs-var-what-is-the-actual-difference-5acdb1f1c83
Scope
Both var and let are scoped differently. var is scoped for the immediate enclosing function while let is scoped for the immediate enclosing block.
Example:
function run() {
var first = "First";
let second = "Second";
console.log(first, second); // First Second
{
var third = "Third";
let fourth = "Fourth";
console.log(third, fourth); // Third Fourth
}
console.log(third); // Third
console.log(fourth); // ReferenceError
}
run();
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 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 JavaScript engine assigns storage spaces to var variables and immediately initializes them to undefined.
- In the execution phase, the JavaScript engine assigns the var variables the values specified by the assignments if there are ones. Otherwise, the var variables remain undefined.
The let variables
- In the creation phase, the JavaScript engine assigns storage spaces to the let variables but does not initialize the variables. Referencing uninitialized variables will cause a ReferenceError.
- The let variables have the same execution phase as the var variables.