Practical ES6
Close
    • Practical ES6
    • Notice of Rights
    • Notice of Liability
    • Trademark Notice
    • About SitePoint
    • Who Should Read This Book?
    • Conventions Used
    • let
    • const
    • Conclusion
    • Searching for the JavaScript HashMap
    • Using ES6 Map Collections
    • Using the Set Collection
    • Weak Collections, Memory, and Garbage Collections
    • WeakMap
    • WeakSet
    • Map All Things? Records vs ES6 Collections
    • New ES6 Collections Yield a More Usable JavaScript
    • Array.from()
    • Array.prototype.find()
    • Array.prototype.findIndex()
    • Array.prototype.keys()
    • Array.prototype.values()
    • Array.prototype.fill()
    • Conclusion
    • String.prototype.startsWith()
    • String.prototype.endsWith()
    • String.prototype.includes()
    • String.prototype.repeat()
    • String.raw()
    • Conclusion
    • Number.isInteger()
    • Number.isNaN()
    • Number.isFinite()
    • Number.isSafeInteger()
    • Number.parseInt() and Number.parseFloat()
    • ES6 Number Methods: Wrapping Up
    • What Are Arrow Functions?
    • Using Arrow Functions
    • Use Cases for Arrow Functions
    • Gotchas and Pitfalls of Arrow Functions
    • How Much Use Is There for Arrow Functions?
    • Creating New Symbols
    • What Can I Do With Symbols?
    • Well-known Symbols
    • The Global Registry
    • Use Cases
    • Browser Support
    • Conclusion
    • Proxy Trap Types
    • Proxy Example 1: Profiling
    • Proxy Example 2: Two-way Data Binding
    • Further Examples
    • Proxy Support
    • Easier Declaration
    • Variable Value Swapping
    • Default Function Parameters
    • Returning Multiple Values from a Function
    • For-of Iteration
    • Regular Expression Handling
    • Destructuring Assignment Support
    • Iterators
    • Generators
    • Cool, so Can I Use Generators and Iterators Now?
    • Conclusions
    • Constructors
    • Keep Data Private
    • Referring to the Current Object
    • Static Properties and Methods
    • Subclasses
    • Inherit to Avoid Duplication
    • Inherit to Substitute Subclasses
    • More than Sugar
    • Using New Features in Imaginative Ways
    • Multiple Inheritance with Class Factories
    • Conclusion
    • Where are Modules in JavaScript?
    • ES6 Modules
    • Using ES6 Modules in Browsers
    • Using ES6 Modules in Node.js
    • Module Melee
    • Overview
    • The API
    • Chaining Promises
    • Handling Errors
    • Conclusion
    • What is a Decorator?
    • How to Use JavaScript Decorators
    • Why Use Decorators?
    • Different Types of Decorator
    • Real World Examples
    • Summary
    • Object Initialization From Variables
    • Object Method Definition Shorthand
    • Dynamic Property Keys
    • Destructuring (Variables From Object Properties)
    • ES2018 (ES9) Rest/Spread Properties
    • The Fetch API
    • Loading JSON
    • Handling Errors
    • Change the Request Method and Headers
    • Bringing it all Together
    • Where to Go from Here
    • The Early History of JavaScript Versioning
    • The Birth of ECMAScript
    • ECMAScript 2015 and the Resurgence of Yearly Releases
    • The TC39 Process
    • Moving Forward
    • A Final Word
    • The Update Process
    • What's New in ES2017
    • Async functions
    • Object.values()
    • Object.entries()
    • Object.getOwnPropertyDescriptors()
    • padStart() and padEnd() String Padding
    • Trailing Commas are Permitted
    • SharedArrayBuffer and Atomics
    • ES2016
    • ES2017
    • ES2018
    • Asynchronous Iteration
    • Promise.finally()
    • Rest/Spread Properties
    • Regular Expression Named Capture Groups
    • Regular Expression lookbehind Assertions
    • Regular Expression s (dotAll) Flag
    • Regular Expression Unicode Property Escapes
    • Template Literals Tweak

New Keywords: let and const

In this tutorial, I'll introduce let and const, two new keywords added to JavaScript with the arrival of ES6. They enhance JavaScript by providing a way to define block-scope variables and constants.

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:

function foo() {  var par = 1;  if (par >= 0) {    var bar = 2;    console.log(par); // prints 1    console.log(bar); // prints 2  }  console.log(par); // prints 1  console.log(bar); // prints 2}foo();

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

1212

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!

To explain you why you'll love let, consider the following code taken from my article 5 More JavaScript Interview Exercises:

var nodes = document.getElementsByTagName('button');for (var i = 0; i < nodes.length; i++) {  nodes[i].addEventListener('click', function() {    console.log('You clicked element #' + i);  });}

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:

var nodes = document.getElementsByTagName('button');for (let i = 0; i < nodes.length; i++) {  nodes[i].addEventListener('click', function() {    console.log('You clicked element #' + i);  });}

The let statement is supported in Node and all modern browsers. There are, however, a couple of gotchas in Internet Explorer 11 which you can read about in the ES6 compatibility table.

A live demo that shows the difference between var and let is available at JSBin.

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.

An example usage of const is shown below:

'use strict';
function foo() {  const con1 = 3.141;  if (con1 > 3) {    const con2 = 1.414;    console.log(con1); // prints 3.141    console.log(con2); // prints 1.414  }  console.log(con1); // prints 3.141  try {    console.log(con2);  } catch(ex) {    console.log('Cannot access con2 outside its block');  }}foo();

A live demo of the previous code is available at JSBin.

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.

Community Questions