Difference between let and var in JavaScript
Here’s a quick and dirty illustration that helps me visualise the difference between let
(available only in ES6) and var
.
for (var i = 0; i < 5; i++) {
console.log(i); // prints 0, 1, 2, 3, 4
}
console.log(i); // prints 5
for (let j = 0; j < 5; j++) {
console.log(j); // prints 0, 1, 2, 3, 4
}
console.log(j); // ReferenceError: j is not defined
The value of i
(initialised as var
) is now available globally while j
(initialised as let
) is only available inside its own block and not outside.
Note that this is happening because constructs like for
and if
are not like functions. Functions have their own scope, while constructs like for
and if
do not by default have their own scope.
ES6 let
and const
can basically be used to create block-scoped variables. With them, every variable initialised inside a block of code surrounded by curly braces will only be accessible within (or deeper in) that block.
Should you use it? Definitely! Be careful though, ES6 is not fully supported on all browsers at the time of this writing (March 2018) and will require an additional setup with Webpack and Babel for transpiling ES6 to ES5 code. You can safely use ES6 on the server side with node.js.