Nick Ang profile picture

Nick Ang

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.