let

Up to ES5, JavaScript had only two types of scope, function scope and global scope. This caused a lot of frustration and unexpected behaviors for developers coming from other languages such as C, C++ or Java. JavaScript lacked block scope, meaning that a variable is only accessible within the block in which it’s defined. A block is everything inside an opening and closing curly bracket. Let’s take a look at the following example:

After running this code, you’ll see the following output in the console:

1
2
1
2

What most developers coming from the languages mentioned above would expect, is that outside the if block you can’t access the bar variable. For example, running the equivalent code in C results in the error 'bar' undeclared at line ... which refers to the use of bar outside the if.

This situation changed in ES6 with the availability of block scope. The ECMA organization members knew that they could not change the behavior of the keyword var, as that would break backward compatibility. So they decided to introduce a new keyword called let. The latter can be used to define variables limiting their scope to the block in which they are declared. In addition, unlike var, variables declared using let aren’t hoisted. If you reference a variable in a block before the let declaration for that variable is encountered, this results in a ReferenceError. But what does this mean in practice? Is it only good for newbies? Not at all!

Here you can recognize a well-known issue that comes from variable declaration, their scope, and event handlers. If you don’t know what I’m talking about, go check the article I mentioned and than come back.

Thanks to ES6, we can easily solve this issue by declaring the i variable in the for loop using let:

const

const addresses the common need of developers to associate a mnemonic name with a given value such that the value can’t be changed (or in simpler terms, define a constant). For example, if you’re working with math formulas, you may need to create a Math object. Inside this object you want to associate the values of π and e with a mnemonic name. const allows you to achieve this goal. Using it you can create a constant that can be global or local to the function in which it is declared.

Constants defined with const follow the same scope rules as variables, but they can’t be redeclared. Constants also share a feature with variables declared using let in that they are block-scoped instead of function-scoped (and thus they’re not hoisted). In case you try to access a constant before it’s declared, you’ll receive a ReferenceError. If you try to assign a different value to a variable declared with const, you’ll receive a TypeError.

Please note, however, that const is not about immutability. As Mathias Bynens states in his blog post ES2015 const is not about immutability, const creates an immutable binding, but does not indicate that a value is immutable, as the following code demonstrates:

const foo = {};
foo.bar = 42;
console.log(foo.bar);
// → 42

If you want to make an object’s values truly immutable, use Object.freeze().

Browser support for const is equally good as for let. The statement const is supported in Node and all modern browsers. But here, too, there are some gotchas in Internet Explorer 11, which you can read about in the ES6 compatability table.

Conclusion

In this tutorial, I’ve introduced you to let and const, two new methods for declaring variables that were introduced to the language with ES6. While var isn’t going away any time soon, I’d encourage you to use const and let whenever possible to reduce your code’s susceptibility to errors. By way of further reading, you might also like our quick tip How to Declare Variables in JavaScript, which delves further into the mechanics of variable declaration.

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.