Release 2016-04-11

From for to forEach() to for-of

for (const elem of arr) --> the use of "const" for declaring elem makes the example fail e.g. in FF 44. MDN uses let in such cases, because the value of elem changes. Once replaced by let, the example runs fine e.g. in Firebug - http://screencast.com/t/EdUxWxrTugRY

Not an erratum: not all JS engines are completely ES6-compliant w.r.t. const, yet.

From for to forEach() to for-of

Last paragraph (for of Array.entries example)

for (const [index, elem] of arr.entries()) {
The use of const above fails in FF 44 because the values of index and elem change. Using let instead works fine in Firebug - http://screencast.com/t/oIY90nJfkY

Not an erratum: not all JS engines are completely ES6-compliant w.r.t. const, yet.

From arguments to rest parameters

The code example with ...args is not working. The problem is with for (const arg of args) (Error: Uncaught SyntaxError: Identifier 'arg' has already been declared).
The const keyword prevent the for loop to get working correctly. Changing that to let or var should help.

Not an erratum: not all JS engines are completely ES6-compliant w.r.t. const, yet.

The word `with` is being formatted as though it was being used as a reserved word, instead of just being part of a multiline string. Not sure if that can be kept.

Escaping in tagged templates

It looks as though a red '\n' is supposed to represent a new line in real life, whereas an '\\n' where the slashes are orange and the n is black represents the literal string

\n

Please consider using more words to make this clear. If I wasn't sitting in front of a laptop to test this out I probably would have gone crazy. Something like

`\n`
//<a new line>

String.raw`\n`
\n //ie, the string backslash followed by n

Iteration order of property keys

Object.keys and Reflect.enumerate don't ensure any order: https://esdiscuss.org/topic/property-ordering-of-enumerate-getownpropertynames

Implementing tag functions

Consider moving much of what's in 8.4 earlier, ie, the substance of what a tag function accepts. This might make many of the preceding tag function examples a bit clearer; right now they're sort of a black box that the reader is left wondering about while he (or she) reads through 8.3.

I’ve extended the description before the examples.

Suggestion - after the paragraph that says

const words like var, but you can't change the initial value of a const-declared variable

It might be useful to add an example, ie

for (const i = 0; i < 4; i++) ; //invalid

Of course it may be my problem for missing that in your text, so of course take this with a pinch of salt as needed :)

send input via the first next() will not generate an error

Spreading into constructors

First code example, first and only line

Christmas Eve came early that year… :)

`new Date(...[1912, 11, 24]) // Christmas Eve 1912`

should be

`new Date(...[1912, 12, 24]) // Christmas Eve 1912`

No, in JavaScript dates, 0 is January and 11 is December.

Does ES6 have array comprehensions?

Originally, ES6 was to have Array and Generator comprehensions (similarly to Haskell and Python). But they were postponed until after ES6.

It was postponed unitl ES7, not ES6.

Array.prototype.push()

Wouldn't you use Array.prototype.concat for concatenating arrays?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

Hence, I would argue that this is not a good example.

You use push() to add destructively and concat() to add non-destructively.

You can assign to more than just variables

the rvalue of the assignment must also be in parantheses
({ foo: obj.prop, bar: arr[0] }) = { foo: 123, bar: true };
should be
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

Keeping private data in WeakMaps

Attempt to assign to const variable / SyntaxError: ... : "counter" is read-only

Example: implementing a tag function for HTML templating

Example: assembling regular expressions

new RegExp('^abc$', i) should be new RegExp('^abc$', 'i'), right?

Does it still make sense to learn ECMAScript 5?

"Via tanspilation, you..." should have been "Via transpilation, you..." the "r" is missing from the word transpilation

Query languages

First code example, first and only line

There seem to be two errors here, one is syntactical and the other logical.

Syntactical:
This attribute selector works as following: `[att~=val]`, so it expects the `~` to come before the `=`, otherwise it will throw a DOMException. Same goes for `[att^=val]`, `[att$=val]`, etc. — see: https://www.w3.org/TR/css3-selectors/#attribute-representation

So this:
$`a.${className}[href=~'//${domain}/']`

Is probably meant to be:
$`a.${className}[href~='//${domain}/']`

Logical:
The attribute selector `[att~=val]` doesn’t seem to be the right fit here, since it “represents an element with the `att` attribute whose value is a whitespace-separated list of words, one of which is exactly 'val'”. The substring matching attribute selector `[att*=val]` seems to be the right one.

Quick example:
<a href="http://exploringjs.com/" class="foo">Great book</a>

<script>
console.log(document.querySelectorAll('a.foo[href~="//exploringjs.com/"]'));
// []

console.log(document.querySelectorAll('a.foo[href*="//exploringjs.com/"]'));
// [a.foo]
</script>

So, to sum up, the whole line, in its entirety, was probably meant to say:
$`a.${className}[href*='//${domain}/']`

--- --- ---

Hope that helps? :) Keep up the great work, Axel!

Greetings,
Miloš / @mixn

Exporting styles: inline versus clause

The “operand” of a default export is an expression (including function expressions and class expressions).'

One of the examples that follow is
export default function (x) {
return x
}

This is a function declaration, not an expression, as you mention in 17.3.2.1 Default export style 1: labels for declarations and 17.3.2.1.1 Why anonymous function declarations and not anonymous function expressions?

All exporting styles

missing the export { default } from 'foo'; style of exporting in the re-exporting section.

Attributes of properties

"Foo.prototype.constructor is non-writeable, non-enumerable, non-configurable."
According to ES6 spec sec. 9.2.8 [MakeConstructor(...)], step 5.b. the [[Configurable]] property attribute is always true for the property "constructor" to set on the class's "prototype".
MakeConstructor(...) is called in sec 14.5.14 step 16. [Runtime Semantics: ClassDefinitionEvaluation].

The phrase should therefore read "Foo.prototype.constructor is non-writeable, non-enumerable, but configurable."

The design process after ES6

The last fragment of the second paragraph says "The process has changed, too and is described" ... the comma should be placed after "too", not "changed".

I suspect it’s best to put a comma before and after “too”.

Upgrading to ES6

The construction of the following sentence is a little odd: "On one hand, upgrading engines is challenging, because they are confronted with all kinds of code on the web, sometimes very old one."

Since the word "code" is uncountable when used in the programming sense, it wouldn't be accurate to say "kinds of codes" in order to be able to pluralise "very old ones". Perhaps the word "scripts" would suffice? If not, maybe go with "confronted with all kinds of code on the web, some of which is very old."

Simplifying asynchronous computations via generators

You open a bracket but never close it just before the code sample:

(if we run Node.js code via babel-node:

Classes Overview

First, thanks overall for you excellent writing.
In Chrome 49, copy the class defs at the top of the chapter into the Chrome developers console and hit return to eval them. Looks good, return values are function ... and both class defs seem fine.
Next you have:
> const cp = new ColorPoint(25, 8, 'green');
Note that the ">" strongly implies that you are typing into some kind of javascript listener, and in fact that's the same prompt that Chrome console gives you.
When pasting the above code into Chrome 49 console and hitting return
you get:
Uncaught ReferenceError: ColorPoint is not defined(…)
Note that https://kangax.github.io/compat-table/es6/
says for my (Chrome 49) browser that it is 91% of Ecmascript 6, and classes in specific are 23/23 ie 100% implemented.
Its easier to do some simpler tests to see this kind of error:
> class Boat {}
< function class Boat{} //ok looks good
> Boat
< Uncaught ReferenceError: Boat is not defined(…)
You also use "const" in your example, so let's make a simpler example of that
> const foo = 2
< undefined //ok, didn't error so presumably ok
> foo
< Uncaught ReferenceError: foo is not defined(…)
Now you can blame all the above on Google, or something obscure in Ecmascript 6 that I don't understand, etc, but if the purpose of the book is to help people understand Ecmascript 6 and how it actually works as opposed to something theoretical, then I think you can help a lot of readers by explaining what's going on here, even if that explanation is simply "Chrome 49 has a bug ..."
After spending a few hours searching the web for what's going on, I find nothing.
It is very difficult to form a query for this kind of bug because you get many hits for "Ecmascript 6 class bug" and any other way I can think of to express this question.
Your book seems like a very good place to put this information.
And of course, I'd like to solve this mystery for my own understanding.
Thanks for turning the ES6 spec into something humans can read!

Works for me in Chrome 50. Engines are currently too much of a moving target. If I point out everything that is not (yet!) spec-compliant, the book will be outdated too quickly.

Can I load a template literal from an external source?

The "external source" template literal should read
const str = 'return `Hello ${name}!`';
else the dynamically generated function func will have return value undefined.

From Array.prototype.slice() to Array.from()

"latter" should be "former" in "“In ES5, the latter method was used to convert Array-like objects to Arrays”

Static data properties

The example provides 2 ways of making a static field, strongly implying that they are the same. They are not. Although the "return value" is a point with the same values, in one case you are always returning THE SAME POINT and in the other you are creating a new point each time. My suggestion would be to simply change the value returned a number. This avoids the problem, is simpler and sufficiently describes the idea you are trying to get across in this section.

I might add that since its natural that static methods are more complex than just a static field of a value, its odd that ES6 doesn't have a simple way to do that. You do describe that this section is a "work around" for this ES6 deficiency. I'd appreciate an explanation for why this was so hard for ES6 team to come up with a solution here. I understand you can't give detailed rationale on all these kinds of decisions, but a sentence or 3 about this apparently obvious one would help.

Parsing JSON via JSON.parse()

"REGEX_SYMBOL_STRING.test(value)" returns a bool and not an array (which is needed 2 lines later) - should be 'value.match(REGEX_SYMBOL_STRING)'

Can I load a template literal from an external source?

You can’t mix declaring and assigning to existing variables

Second code example, the very last line

`({ foo: f, bar: b }) = someObject;` should be `({ foo: f, bar: b } = someObject);` — why, is explained in 10.9.1.

Release 2015-11-25

Choosing a package manager

The text "npm (CommonJS modules)" seems to imply that npm only works for CommonJS modules.

The following blog entry clearly states that npm is not only for CommonJS, and that it can contain any kind of JS code, including ES6:
http://blog.npmjs.org/post/101775448305/npm-and-front-end-packaging

Also, this question in the npm faq explains that npm packages don't need to be Node-flavored modules:
https://docs.npmjs.com/misc/faq#what-is-a-module

Besides this, I think a similar case could be made for the next line,
"Bower (CommonJS or AMD modules)", which I also think is not totally inclusive.

JavaScript versus ECMAScript

JavaScript versus ECMAScript

Grammar error in the sentence - "That name is comes from the standard organization Ecma, which manages the language standard."

A brief history of ECMAScript

ECMAScript Harmony

The last paragraph in 1.7.3 seems out of the blue: "This is not completely true: there are a few minor breaking changes that don’t affect code on the web. These are detailed in section D.1 and section E.1 of the ES6 specification.↩
Source: Introduction of ES6 spec.
[…] regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and other enhancements. [1]".

Maybe the section about backwards compatibility would be more appropriate.

These are footnotes. I’ll try to find a way to make it clearer what they are.

ECMAScript 6 (June 2015)

There are two "the" in the last bullet:

"However, given how established the the name “ECMAScript 6”"

JavaScript versus ECMAScript

The sentence reads as - That name is comes from the standard organization Ecma, which manages the language standard.

This should read as - That name comes from the standard organization...

JavaScript versus ECMAScript

The sentence reads as - Since ECMAScript’s inception, the name of the organization changed from the acronym “ECMA” to the proper name “Ecma”.

This should be changed to - Since ECMAScript’s inception, the name of the organization has changed from the acronym “ECMA” to the proper name “Ecma”.

Converting to string

Two 'via' in the sentence "Coercion is handled via via the internal operation"

Defining and using an HTML template

The console.log output is showing the wrong names being HTML-escaped (the rest of the text supports this).
Console.log output should be:
<table>

<tr>&lt;Jane&gt;</tr>
<tr>Bond</tr>

<tr>Lars</tr>
<tr>&lt;Croft&gt;</tr>

</table>

Where 'Jane' and 'Croft' are escaped rather than 'Bond' and 'Lars' in the code snippet

JavaScript versus ECMAScript

The error was found in the following sentence:

"That name is comes from the standard organization Ecma, which manages the language standard. "

"is comes from" should be "is coming from".
Also, I'd recommend a comma (,) after 'organization'.

Kind regards,
Michael

Array elements and iterator

The algorithm continues with the **elements of the pattern**

emphasis mine.

Should that instead read

The algorithm continues with each <<pattern>> of <<elements>>

As you say earlier, the destructuring algorithm recursively breaks apart both operands. In the array section, it looks like <<elements>> is processed one <<pattern>> at a time, but the introductory sentence above is slightly confusing the first read through.

Apologies if I'm missing something.

React JSX via tagged templates

"Facebook’s React user interface library has the optional language extension RSX that enables you to embed HTML inside JavaScript. "

-> I guess that instead of RSX we should have JSX here.

Immediately-invoked arrow functions

On the note below given example code

I don't know whether code or note has error, however the parens aren't around the arrow function.

Better syntax for existing features

Missing parameters (x,y) in the constructors in both ES6 and ES5 code blocks.

There are two "that".

"It is great that that succeeded."

It’s proper English: the first “that” is a conjunction, the second “that” is a demonstrative pronoun (like “this”).

in subclasses of Array

There are two "that".

"The reason that that works is because constructors..."

It’s proper English: the first “that” is a conjunction, the second “that” is a demonstrative pronoun (like “this”).

Recursion via yield* (for output)

There are two "that".

"This section shows that that is more complicated than..."

It’s proper English: the first “that” is a conjunction, the second “that” is a demonstrative pronoun (like “this”).

Step 2 – extract numbers

Consider search by "that that", "the the", "as as" in the full content.

“that that” is proper English: the first “that” is a conjunction, the second “that” is a demonstrative pronoun (like “this”).

Property access in the spec

Proly links such as ToPropertyKey(), ToString(), etc. should point to the final spec. They currently point to the draft. I haven't checked other links so maybe there are others as well.

Completely new features

You write, "implementing tail call optimization universally in ES5 would require a radical transformation of the ES6 code (e.g. tramplining)." The last word is misspelled and should include an additional "o": "trampolining."

"How do instantiate a class, ..."

"How do instantiate a class, given an Array of arguments"

Should be "How do I instantiate ... " or "How to instantiate ..."

Static Number properties related to safe integers

Number.MIN_SAFE_INTEGER <= n Should be Number.MIN_SAFE_INTEGER >= n as its described in the next paragraph

The code is correct

Arrow functions bind very loosely

The second sentence in the first paragraph contains a comma splice.

"it should bind more tightly than the arrow function"

is an independent clause, and should be offset with a semicolon, not a comma.

Sources of variable values

Comma splice.

"it receives its value from a surrounding scope"

is an independent clause and should be offset with a semicolon (or colon) not a comma. Ie

Its value is determined by the structure of the program; it receives its value from a surrounding scope

Variables that are lexical ...

Comma splices.

"its value is determined by how they are called"

is an independent clause, and should be offset by a semicolon. Also, I *think* there's a plurality mismatch. Shouldn't it be

"Traditional functions have a dynamic this; their value is determined by how they are called."

?

Same for the second bullet.

“its” refers to `this`.

Goal 1: Be a better language

The text talks of "Goal 1: Be a better language" in 1.5.1, then the next section, 1.5.2, talks of "Goal 3: Improve interoperation".

What is the secret hidden goal 2?!

Number.EPSILON

"For example, 0.1 and 0.2 **can** be represented precisely, which you notice if you add them and compare them to 0.3 (which **can’t** be represented precisely, either)."

Probably, should be "can't" in both places.

Prefer arrow functions as callbacks

"Whenever you can, you should use arrow functions as callbacks and not traditional factions." Factions -> Functions

Preventing iterators from being closed

Says, "There is AN another way of making generators unclosable" The "an" is unnecessary

You can only yield in generators

In the sentence, "But unfortunately that isn’t always possibe," "possible" is spelled incorrectly as "possibe"

Promises are always async

The sentence "That means that you code can rely on run-to-completion semantics," misspells "your" as "you".

Repeated word "object" twice in "proxy is the object object whose operations".

Block-level function declarations in sloppy mode

Using singular form of the verb "let" for plural subject "browsers" in "for browsers that lets function declarations".

The subject of “lets” is “semantics”, which is singular

Kinds of meta programming

Comma splice

"ECMAScript 5 doesn't support intercession, proxies were created to fill that gap."

Comma should be a semicolon.

Proxies as prototypes

Comma splice

"There are more operations that affect prototypes, they are listed at the end of this chapter."

The comma should be a semicolon.

There is no sleep function in the code example, it refers to blockMainThread?
23.2.5 also metions sleep().

The JavaScript call stack

return should be used in function, it's somehow not proper.

Traditional functions are bad non-method functions, due to this

", we’d like to access this.name," s.b. ", we’d like to access this.prefix,"

ES6: The spread operator (...) mostly replaces apply()

"even in dipatched method calls." s.b. "even in dispatched method calls."

The temporal dead zone

There are two "value" in the last sentence:

If there isn’t, the value value of the variable remains undefined.

Arrow functions versus normal functions

In 13.5.1 you said we would need parentheses for "typeof () => {}" , there shown as "typeof (() => {})"

The bodies of arrow functions

"If an expression is the body an arrow function, ..." should have 'of' as in "body of an"

Promises are always async

"That means that you code can ..." s.b. "That means that your code can ..."

Generating JSON via JSON.stringify()

Replacer approach only works if symbols are property values.
But example shows obj with symbol as property key.
Is that intended?

Tagged templates

Defining and using an HTML template

This line refer to arr, which should of type object:
"for ({name: n, age: a} of arr)"
Suggesting this instead:
"for ({name: n, age: a} of obj)"

Computed property keys

Prefer arrow functions as callbacks

"traditional factions" should be "traditional functions"

I'd also like to know what you're using to convert the leanpub markdown to html for your landing page, as I'm writing a book on leanpub also... leanpub.com/holistic-infosec-for-web-developers/
Thanks.
Kim.

Goal: Improve interoperation

"Three examples are:" is followed by four examples.

Is ES6 statically typed?

"Three benefits of static typing are:" is followed by two bullet points.

Prefer arrow functions as callbacks

factions => functions

Oh, and thanks a lot for this masterpiece on ES6! Good, concise explanations right down to the point!

Blocking the event loop

The example code uses a wait loop to demonstrate blocking dispatch - it does not use sleep().

" It uses the – synchronous – sleep() function to block the event loop for five seconds." needs fixing.

In next subsection, "(like the previously implemented sleep())" needs fixing.

Implicit requests

"But, due to run to completion, things are always safe." 3 of 4 places uses style "run-to-completion" with the added hyphens. Should here also?

“run-to-completion” is the adjective, “run to completion” is the noun

Glossary: Promises

"A Promise is always in either one of three mutually exclusive states:"

This really gartes and either should be "any one of three" or better just "one of three". (either is nearly always just one of two alternatives)

Example: promisifying fs.readFile()

Can you say something about why you don't have an else after the reject() call? Don't we then fall through to the resolve()? (I believe this works given the one-time nature of settlement) But most (all?) other code samples separate code paths using an 'else'...

Yes, that’s a bug. Good catch!

New Array.prototype methods

Missing the copyWithin method on Array.prototype.

Handler methods, Invariants of handler methods,

The signature of the construct trap of proxies is wrong: construct(target, argumentsList) : Object.

The construct trap is called with the 'new.target' as the third argument in the specification at 9.5.14, step 9: Let newObj be Call(trap, handler, «target, argArray, newTarget »).

Multiple return values via objects

The method Object.getOwnPropertyDescriptor() return a property descriptors...
Could be:
The method Object.getOwnPropertyDescriptor() returns a property descriptor...

Meta programming with proxies Overview

"In the following example, proxy is the OBJECT object whose operations we are intercepting and handler is the object that handles the interceptions." SHOULD BE:

"In the following example, proxy is the TARGET object whose operations we are intercepting and handler is the object that handles the interceptions."

Named Parameters as Descriptions

In the quote below, the question should be "what do these three numbers mean". If you are referring to just the two "additional" parameters after the first, it could be reworded to say so but I think that would be confusing.
------------------------------------------------------
As soon as a function has more than one parameter, you might get confused about what each parameter is used for. For example, let’s say you have a function, selectEntries(), that returns entries from a database. Given the function call:

selectEntries(3, 20, 2);
what do these two numbers mean?

From function expressions to arrow functions

The sample code declares UiComponent with illegal function declaration syntax, there the first line is missing parentheses. Should be something like so:

function UiComponent () {
}

before was:

function UiComponent {
}

Arrow functions versus normal functions

In "There is no internal method [[Construct]] that allows a normal function to be invoked via new", "normal function" must be replaced with "arrow function".

Prototype chains

const getProto = Object.getPrototypeOf.bind(Object);

No need for bind(Object) here.

I do that do be 100% safe; you never know what implementations rely on.

You can’t mix declaring and assigning to existing variables

({ foo: f, bar: b }) = someObject;

This doesn't work anymore. You need to put the whole assignment inside parens. So, it should be:

({ foo: f, bar: b } = someObject);

Tested in FF and Babel. Can't verify this thing in the standard...

TC39 (Ecma Technical Committee 39)

JavaScript versus ECMAScript

"the standard organization Ecma"

Being pedantic here, but that "standard" should be "standards". Without the pluralised form, it sounds like an adjective describing Ecma as an organisation that happens to be standard.

Attributes of properties

"non-writeable" should be spelt "non-writable"; it's listed twice, in both subpoints:

– Foo.prototype is non-writeable, non-enumerable, non-configurable.
– Foo.prototype.constructor is non-writeable, non-enumerable, non-configurable.

Defining and using an HTML template

Double 'the' in "The trick is that the the inside"

Release 2015-10-03

The standard species pattern

On the first li, use is duplicated
If this.constructor[Symbol.species] exists, use use it as a constructor for the new instance.
On the second one, the closing parenthesis is omitted :
Otherwise, use a default constructor (e.g. Array for Arrays.

Release 2015-09-12

Modules in JavaScript

Having both named exports and a default export in a module

"With ES6 glasses, the function ..." s.b. "With ES6 classes, the function ..."

Parsing JSON via JSON.parse()

REGEX_SYMOBL_STRING should be REGEX_SYMBOL_STRING

Unifying asynchronous APIs

Modules export immutable bindings, not values

“It can, however, be changed from insider the module.”

Should be

“It can, however, be changed from inside the module.”

Note "insider" becomes "inside".

Complaint: Classes lock you in, due to mandatory new

If you want to instantiate a class, you are force to use new in ES6.

"force" should be "forced".

Release 2015-06-28

Operand of export default: declaration or expression

export and default are placed incorrectly:

default export function bar() { ··· } This code is equivalent to:
bar();
function bar() { ··· }
default export bar;

Iterating over Arrays

section title is wrong:
17.2.1.1 p
airs]Iterating over [index, element] pairs

Symbols as keys of internal properties

dec() function of the Symbol version of Countdown

Instead of `_action.get(this)();` `this[_action]()` should be used for the symbol version of the Countdown prototype

Last property of the object assigned to the paths variable

An extra comma added to last property of `paths`

There are two 'that's in the line.

It is great that that succeeded