Practical ES6
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:

Code snippet

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:

Code snippet

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:

Code snippet

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:

Code snippet

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:

Code snippet

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:

Code snippet

'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