Exploring ES2016 and ES2017

Axel Rauschmayer
This book is for sale at http://leanpub.com/exploring-es2016-es2017
This version was published on 2016-05-25

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools
and many iterations to get reader feedback, pivot until you have the right book and build
traction once you do.
2016 Axel Rauschmayer

Contents
What you need to know about this book . . . . . . . . . . . . . . . . . . . . . . . . . .
What is in this book? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

i
i
i

About the author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ii

Background

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1. The TC39 process for ECMAScript features . . . . . . . . . . . . .

1.1
Who designs ECMAScript? . . . . . . . . . . . . . . . . . . .
1.2
How is ECMAScript designed? . . . . . . . . . . . . . . . . .
1.2.1 Problem: ECMAScript 2015 (ES6) was too large a release
1.2.2 Solution: the TC39 process . . . . . . . . . . . . . . . . .
1.3
Dont call them ECMAScript 20xx features . . . . . . . . . .
1.4
Further reading . . . . . . . . . . . . . . . . . . . . . . . . .

.
.
.
.
.
.
.

2
2
2
2
3
4
5

2. FAQ: ES2016 and ES2017 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2.1
Isnt ECMAScript 2016 too small? . . . . . . . . . . . . . . . . . . . . . . . .

6
6

II

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

3. The exponentiation operator (**) . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3.1
Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3.2
An infix operator for exponentiation . . . . . . . . . . . . . . . . . . . . . . .

8
8
8

ECMAScript 2016

4. ES2016 feature: Array.prototype.includes .

4.1
Overview . . . . . . . . . . . . . . .
4.2
The Array method includes . . . . .
4.3
Frequently asked questions . . . . . .
4.4
Further reading . . . . . . . . . . . .

III

ECMAScript 2017

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

9
9
9
10
10

. . . . . . . . . . . . . . . . . . . . . . . . . . . 11

5. ES proposal: Object.entries() and Object.values() . . . . . . . . . . . . . . . . . . .

5.1
Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.1.1 Object.entries() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12
12
12

CONTENTS

5.2
5.3

5.1.2 Object.values() . . . . . . . . . . . .
Object.entries() . . . . . . . . . . . . . .
5.2.1 Setting up Maps via Object.entries()
5.2.2 FAQ: Object.entries() . . . . . . . .
Object.values() . . . . . . . . . . . . . .

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

.
.
.
.
.

12
12
13
13
13

What you need to know about this

book
This book is about ECMAScript 2016 and ECMAScript 2017, new versions of JavaScript.
It only covers whats new in those versions. For information on prior versions, consult the
following books of mine (which are free to read online):
Introduction to JavaScript for programmers (up to ES5): Speaking JavaScript
Whats new in ECMAScript 6 (ES2015): Exploring ES6

What is in this book?

Exploring ES2016 and ES2017 is a living book. Much content is still to come! Buy it to stay
up to date on what is in ECMAScript 2016 and ECMAScript 2017:
ES2016 is finished. This book describes what is in it.
ES2017 is work in progress. Features become part of this ECMAScript version as an implicit
stage after stage 4. Once they do, I describe them here (until ES2017 is finished). Features
in prior stages are tracked on a web page of my blog.

Support
Forum: The Exploring ES6 homepage links to a forum where you can discuss questions
and ideas related to this book.
Errata (typos, errors, etc.): On the Exploring ES6 homepage, there are links to a form
for submitting errata and to a list with submitted errata.
http://speakingjs.com/es5/
http://exploringjs.com/es6/
http://www.2ality.com/2016/02/ecmascript-2017.html
http://exploringjs.com/#forum
http://exploringjs.com/#errata

About the author

Dr. Axel Rauschmayer has been programming since 1985 and developing web applications since
1995. In 1999, he was technical manager at a German Internet startup that later expanded
internationally. In 2006, he held his first talk on Ajax.
Axel specializes in JavaScript, as blogger, book author and trainer. He has done extensive research
into programming language design and has followed the state of JavaScript since its creation. He
started blogging about ECMAScript 6 in early 2011.

ii

I Background

1. The TC39 process for ECMAScript

features
This chapter explains the so-called TC39 process, which governs how ECMAScript features are
designed, starting with ECMAScript 2016 (ES7).

1.1 Who designs ECMAScript?

Answer: TC39 (Technical Committee 39).
TC39 is the committee that evolves JavaScript. Its members are companies (among others, all
major browser vendors). TC39 meets regularly, its meetings are attended by delegates that
members send and by invited experts. Minutes of the meetings are available online and give
you a good idea of how TC39 works.
Occasionally (even in this book), youll see the term TC39 member referring to a human. Then
it means: a delegate sent by a TC39 member company.
It is interesting to note that TC39 operates by consensus: Decisions require that a large majority
agrees and nobody disagrees strongly enough to veto. For many members, agreements lead to
real obligations (theyll have to implement features etc.).

1.2 How is ECMAScript designed?

1.2.1 Problem: ECMAScript 2015 (ES6) was too large a release
The most recent release of ECMAScript, ES6, is large and was standardized almost 6 years after
ES5 (December 2009 vs. June 2015). There are two main problems with so much time passing
between releases:
Features that are ready sooner than the release have to wait until the release is finished.
Features that take long are under pressure to be wrapped up, because postponing them
until the next release would mean a long wait. Such features may also delay a release.
Therefore, starting with ECMAScript 2016 (ES7), releases will happen more frequently and be
much smaller as a consequence. There will be one release per year and it will contain all features
that are finished by a yearly deadline.
http://www.ecma-international.org/memento/TC39.htm
http://www.ecma-international.org/memento/TC39-M.htm
https://github.com/tc39/tc39-notes

The TC39 process for ECMAScript features

1.2.2 Solution: the TC39 process

Each proposal for an ECMAScript feature goes through the following maturity stages, starting
with stage 0. The progression from one stage to the next one must be approved by TC39.
1.2.2.1 Stage 0: strawman
What is it? A free-form way of submitting ideas for evolving ECMAScript. Submissions must
come either from a TC39 member or a non-member who has registered as a TC39 contributor.
Whats required? The document must be reviewed at a TC39 meeting (source) and is then
added to the page with stage 0 proposals.
1.2.2.2 Stage 1: proposal
What is it? A formal proposal for the feature.
Whats required? A so-called champion must be identified who is responsible for the proposal.
Either the champion or a co-champion must be a member of TC39 (source). The problem solved
by the proposal must be described in prose. The solution must be described via examples, an
API and a discussion of semantics and algorithms. Lastly, potential obstacles for the proposal
must be identified, such as interactions with other features and implementation challenges.
Implementation-wise, polyfills and demos are needed.
Whats next? By accepting a proposal for stage 1, TC39 declares its willingness to examine,
discuss and contribute to the proposal. Going forward, major changes to the proposal are
expected.
1.2.2.3 Stage 2: draft
What is it? A first version of what will be in the specification. At this point, an eventual inclusion
of the feature in the standard is likely.
Whats required? The proposal must now additionally have a formal description of the syntax
and semantics of the feature (using the formal language of the ECMAScript specification). The
description should be as complete as possible, but can contain todos and placeholders. Two
experimental implementations of the feature are needed, but one of them can be in a transpiler
such as Babel.
Whats next? Only incremental changes are expected from now on.
1.2.2.4 Stage 3: candidate
What is it? The proposal is mostly finished and now needs feedback from implementations and
users to progress further.
http://www.ecma-international.org/memento/contribute_TC39_Royalty_Free_Task_Group.php
https://github.com/tc39/ecma262/blob/master/FAQ.md
https://github.com/tc39/ecma262/blob/master/stage0.md
https://github.com/tc39/ecma262/blob/master/FAQ.md

The TC39 process for ECMAScript features

Whats required? The spec text must be complete. Designated reviewers (appointed by TC39,
not by the champion) and the ECMAScript spec editor must sign off on the spec text. There must
be at least two spec-compliant implementations (which dont have to be enabled by default).
Whats next? Henceforth, changes should only be made in response to critical issues raised by
the implementations and their use.
1.2.2.5 Stage 4: finished
What is it? The proposal is ready to be included in the standard.
Whats required? The following things are needed before a proposal can reach this stage:

Test 262 acceptance tests (roughly, unit tests for the language feature, written in JavaScript).
Two spec-compliant shipping implementations that pass the tests.
Significant practical experience with the implementations.
The ECMAScript spec editor must sign off on the spec text.

Whats next? The proposal will be included in the ECMAScript specification as soon as possible.
When the spec goes through its yearly ratification as a standard, the proposal is ratified as part
of it.

1.3 Dont call them ECMAScript 20xx features

As you can see, you can only be sure that a feature will be included in the standard once its
proposal has reached stage 4. Then its inclusion in the next ECMAScript release is probable, but
not 100% sure, either (it may take longer). Therefore, you cant call proposals (e.g.) ES7 features
or ES2016 features, anymore. My two favorite ways of writing headings for articles and blog
posts are therefore:
ECMAScript proposal: the foo feature. The stage of the proposal is mentioned at the
beginning of the article.
ES.stage2: the foo feature
If a proposal is at stage 4, Id be OK with calling it an ES20xx feature, but its safest to wait until
the spec editor confirms what release it will be included in. Object.observe is an example of an
ECMAScript proposal that had progressed until stage 2, but was ultimately withdrawn.
https://github.com/tc39/test262

The TC39 process for ECMAScript features

1.4 Further reading

The following were important sources of this chapter:
The ecma262 (ECMA-262 is the ID of the ECMAScript standard) GitHub repository, which
contains:
A readme file with all proposals at stage 1 or higher
A list of stage 0 proposals
ECMA-262 frequently asked questions
The TC39 process document
Other things to read:
Kangax ES7 compatibility table shows what proposals are supported where and groups
proposals by stage.
More information on the ES6 design process: section How ECMAScript 6 was designed
in Exploring ES6
https://github.com/tc39/ecma262
https://github.com/tc39/ecma262/blob/master/README.md
https://github.com/tc39/ecma262/blob/master/stage0.md
https://github.com/tc39/ecma262/blob/master/FAQ.md
https://tc39.github.io/process-document/
https://kangax.github.io/compat-table/es7/
http://exploringjs.com/es6/ch_about-es6.html#_how-ecmascript-6-was-designed

2. FAQ: ES2016 and ES2017

2.1 Isnt ECMAScript 2016 too small?
ES2016 being so small demonstrates that the new release process (as described in the previous
chapter) works:
New features are only included after they are completely ready and after there are at least
two implementations that were sufficiently field-tested.
Releases happen much more frequently (once a year) and can be more incremental.
ES2016 will give everyone (TC39, engine implementors, JS developers) time to catch their breath
and is a welcome break after the enormous ES6 release.

II ECMAScript 2016

3. The exponentiation operator (**)

The exponentiation operator (**) is an ECMAScript proposal by Rick Waldron.

3.1 Overview
1
2

> 6 ** 2
36

3.2 An infix operator for exponentiation

** is an infix operator for exponentiation:
1

x ** y

produces the same result as

1

Math.pow(x, y)

Examples:
1
2
3
4
5

let squared = 3 ** 2; // 9
let num = 3;
num **= 2;
console.log(num); // 9

Further reading:
Exponentiation Operator (Rick Waldron)
https://github.com/rwaldron/exponentiation-operator

4. ES2016 feature:
Array.prototype.includes
This chapter describes the ECMAScript proposal Array.prototype.includes by Domenic
Denicola and Rick Waldron.

4.1 Overview
1
2
3
4

> ['a', 'b', 'c'].includes('a')

true
> ['a', 'b', 'c'].includes('d')
false

4.2 The Array method includes

The Array method includes has the following signature:
1

Array.prototype.includes(value : any) : boolean

It returns true if value is an element of its receiver (this) and false, otherwise:
1
2
3
4

> ['a', 'b', 'c'].includes('a')

true
> ['a', 'b', 'c'].includes('d')
false
includes is similar to indexOf the following two expressions are mostly equivalent:

1
2

arr.includes(x)
arr.indexOf(x) >= 0

The main difference is that includes() finds NaN, whereas indexOf() doesnt:

ES2016 feature: Array.prototype.includes

1
2
3
4

10

> [NaN].includes(NaN)
true
> [NaN].indexOf(NaN)
-1
includes does not distinguish between +0 and -0 (which is how almost all of JavaScript works):

1
2

> [-0].includes(+0)
true

Typed Arrays will also have a method includes():

1
2

let tarr = Uint8Array.of(12, 5, 3);

console.log(tarr.includes(5)); // true

4.3 Frequently asked questions

Why is the method called includes and not contains?
The latter was the initial choice, but that broke code on the web (MooTools adds this
method to Array.prototype).
Why is the method called includes and not has?
has is used for keys (Map.prototype.has), includes is used for elements (String.prototype.includes).
The elements of a Set can be viewed as being both keys and values, which is why there is
a Set.prototype.has (and no includes).
The ES6 method String.prototype.includes works with strings, not characters. Isnt
that inconsistent w.r.t. Array.prototype.includes?
If Array includes worked exactly like string includes, it would accept arrays, not single
elements. But the two includes follow the example of indexOf; characters are seen as a
special case and strings with arbitrary lengths as the general case.

4.4 Further reading

Array.prototype.includes (Domenic Denicola, Rick Waldron)
http://speakingjs.com/es5/ch11.html#two_zeros
https://esdiscuss.org/topic/having-a-non-enumerable-array-prototype-contains-may-not-be-web-compatible
http://exploringjs.com/es6/ch_strings.html#_checking-for-containment-and-repeating-strings
https://github.com/tc39/Array.prototype.includes/

III ECMAScript 2017

11

5. ES proposal: Object.entries() and

Object.values()
This chapter describes the ECMAScript proposal Object.values/Object.entries by Jordan
Harband.

5.1 Overview
5.1.1 Object.entries()
1
2
3
4
5
6
7

let obj = { one: 1, two: 2 };

for (let [k,v] of Object.entries(obj)) {
console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
// Output:
// "one": 1
// "two": 2

5.1.2 Object.values()
1
2

> Object.values({ one: 1, two: 2 })

[ 1, 2 ]

5.2 Object.entries()
This method has the following signature:
1

Object.entries(value : any) : Array<[string,any]>

If a JavaScript data structure has keys and values then an entry is a key-value pair, encoded
as a 2-element Array. Object.entries(x) coerces x to an Object and returns the entries of its
enumerable own string-keyed properties, in an Array:
1
2

> Object.entries({ one: 1, two: 2 })

[ [ 'one', 1 ], [ 'two', 2 ] ]

Properties, whose keys are symbols, are ignored:

https://github.com/tc39/proposal-object-values-entries

12

ES proposal: Object.entries() and Object.values()

1
2

13

> Object.entries({ [Symbol()]: 123, foo: 'abc' });

[ [ 'foo', 'abc' ] ]
Object.entries() finally gives us a way to iterate over the properties of an object (read here

why objects arent iterable by default):

1
2
3
4
5
6
7

let obj = { one: 1, two: 2 };

for (let [k,v] of Object.entries(obj)) {
console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
// Output:
// "one": 1
// "two": 2

5.2.1 Setting up Maps via Object.entries()

Object.entries() also lets you set up a Map via an object. This is more concise than using an

Array of 2-element Arrays, but keys can only be strings.

1
2
3
4
5
6

let map = new Map(Object.entries({

one: 1,
two: 2,
}));
console.log(JSON.stringify([...map]));
// [["one",1],["two",2]]

5.2.2 FAQ: Object.entries()

Why is the return value of Object.entries() an Array and not an iterator?
The relevant precedent in this case is Object.keys(), not, e.g., Map.prototype.entries().
Why does Object.entries() only return the enumerable own string-keyed properties?
Again, this is done to be consistent with Object.keys(). That method also ignores properties whose keys are symbols. Eventually, there may be a method Reflect.ownEntries()
that returns all own properties.

5.3 Object.values()
Object.values() has the following signature:

http://exploringjs.com/es6/ch_iteration.html#sec_plain-objects-not-iterable

ES proposal: Object.entries() and Object.values()

14

Object.values(value : any) : Array<any>

It works much like Object.entries(), but, as its name suggests, it only returns the values of the
own enumerable string-keyed properties:
1
2

> Object.values({ one: 1, two: 2 })

[ 1, 2 ]