rse/es6-features

ECMAScript 6: Feature Overview & Comparison

es6-features's Issues

A number of sections don't scroll properly when presenting

Tested in Chrome and Firefox.

For example: Block-Scoped Variables, Regular Expression Sticky Matching, Parameter Context Matching, ...

Octal numbers in ES5

Heyho, I just wanted to add a little thing:

http://es6-features.org/#BinaryOctalLiteral doesn't tell the simplest way of handling octal numbers. To write octal numbers your number simply has to start with a leading zero, so

0767 === 503 -> true
010 === parseInt('10', 8) -> true (result: 8)
077 === parseInt('77', 8) -> true (result: 63)

You could add this to the page, because it is an existing feature in ES5, even though a lot of people don't know about.

Unexpected number of arguments

In this example two arguments are provided where one is expected. This hinders code comprehension as in the ES6 style the function is not named explicitly, I had to look at the ES5 style to understand that the default exported function is the one imported as exp.

Browser support

First of all, this is an incredible tool and I'm really excited about it.

I'd love if there were some browser compatibility table, similar to what MDN provides. Is this feasible?

Thanks!

Add block-scope callback expressions example

By far one of the most popular applications of let is the ability to do this:

let callbacks = [];
for(let i = 0; i <= 2; i++) {
    callbacks[i] = function() { return i * 2; };
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;

That is, each function has its own binding of i, rather than a shared function-scoped binding.
(This is not supported by any browsers yet.)

Object initializer shorthand for sub-properties?

[QUESTION]

Is there any way to shorten the following with ES6 features?

return { op: this.op, lhs: this.lhs, rhs: this.rhs };

I was hoping I could do something like this...

return { this.op, this.lhs, this.rhs };

...but that results in a syntax error.

It is possible to do this...

const { op, lhs, rhs } = this;
return { op, lhs, rhs };

...but that's still a bit verbose (you have to repeat {op, lhs, rhs} twice, which becomes inefficient with longer or more properties).

Spread Operator example should be accompanied with Array Literal Spreading

Consider that this is valid ES6:

var b = [1,2,3];
var a = [0, ...b];
a; // [0,1,2,3]

var instead of let

es6-features/features.txt

Line 1143 in e9f44ba

6| var |iterator| = |proc(...params)|;

Regular Expression Sticky Matching seems not working

Seems lastIndex not working with exec method

ECMAScript 5 code for Template Strings Custom Interpolation is not correct

In the section "Custom Interpolation" under "Template Strings" the following code is presented as a backwards compatible ECMAScript 5 equivalent:

ES6: get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`
ES5: get([ "http://example.com/foo?bar=", "&quux=", "" ], [ bar + baz, quux ]);

This is incorrect as per the Tagged template strings specification for ES6. The templated variables (quux, bar+baz) are passed into the template function as separate function arguments, not as an array (see mozilla dev reference).

The actual code should read something like:

ES6: get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`
ES5: get([ "http://example.com/foo?bar=", "&quux=", "" ], bar+baz, quux);

This array-like behaviour is, however, often implemented within the ES6 context using rest parameters, as this behaviour is arguably more practical to use.

Destructuring Assignment/Array Matching sample does not work as expected on the 'reduced' version

In the case of:

var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]

list[ b, a ] is interpreted as an array expression. http://astexplorer.net/ was useful to troubleshoot it.

Some ES5 code doesn't use ES5 to the fullest

Lexical this could be written as:

this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}.bind(this));

Default parameter values could be written as:

function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
}
f(1) === 50;

Wishlist: Links back to the MDN JavaScript documentation

It would be awesome if this had links (either on the left or on the example pages) to the relevant location in the MDN JavaScript documentation. That way if you wanted more details on a particular feature it'd be just one click a way.

I suggest the MDN JavaScript docs because I find them complete, well maintained and well written, but any similar on-line JavaScript language doc would work.

Should have mutable and non mutable collection types

ES6 minor releases should include having options between mutable and non mutable collection. It can be useful for developing progressive web apps and mobile apps.

Meta-Programming Proxing trap function as property 'get'?

In http://es6-features.org/#Proxing:

Instead of:

let proxy = new Proxy(target, {
    get (receiver, name) {
        return `Hello, ${name}!!`
    }
})

Shouldn't it be:

let proxy = new Proxy(target, {
    get: function (receiver, name) {
        return `Hello, ${name}!!`
    }
})

?

I18n

Currently there's a fork that is translating it to portuguese but wouldn't be the best to support i18n? It's not so hard to do as you already have a build script and you can manage to have mutiples versions of the .txt file.

Line height of marks of syntax highlight should be increased

Half bottom of g, j, p, q, y don't displayed properly.

ES5 Constants example is overcomplicated

In fact,

var PI = (function () {
    var PI = 3.141593;
    return function () { return PI; };
})();

could be reduced to

var PI = function () {
  return 3.141593;
};

and it would have totally same effect, while being simpler and faster.

Spread Operator example should be accompanied with Iterable Spreading

Consider that this is valid ES6:

function *generator() { yield 1; yield 2; yield 3; }
var a = [...generator()];
a[0]; // 1
a[1]; // 2
a[2]; // 3

Rename spread operator to spread syntax

Because it is syntax. Stackoverflow

Function-Scoped Functions aren't an ES6 feature

Placing a function declaration inside another function declaration has been valid JavaScript since Netscape 2.0, and moreover has never been disallowed by strict mode.

Array Matching example should be accompanied with Iterable Matching

Consider that this is valid ES6:

function *generator() { yield 1; yield 2; yield 3; }
var [a, b] = generator();
a; // 1
b; // 2

Mention of Babel (the transpiler)?

It is an ES6 to ES5 transpiler that, with its polyfill, is nearly spec compliant.

The biggest area where it deviates from spec is its handling of the temporal dead zone (TDZ) (Traceur has the same problem). It's hard for a transpiler to know if a function call is reading an undeclared variable or unallocated this or not, and the necessary safety wrapper is an insane performance drop.

Other than that, it's become the de facto standard.

Why var?

Love it!
But why we use var everywhere instead of let/const?

`Reflection` bug

ES5 example: Object.keysgetOwnPropertyNames

Evaluating string interpolation for template literals

I encountered this issue while trying out the string interpolation feature of ES6

the code is

...
    if (unevaluated_lines) {
        let num_lines_message = (`${unevaluated_lines} answer ${unevaluated_lines == 1 ? "line was" : "lines were"} not evaluated.`)
        submit.reject(Error("Please give an evaluation to every answer line. " + num_lines_message))
...

but the saved string in the variable num_lines_message does follow spacing between string literals but the line of code unassigned to a variable works fine. See screenshot below:

Using Google Chrome:

Array.prototype.findIndex

I believe that Array.prototype.findIndex is a new feature of es6, see: http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.findIndex
and https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
However, I don't see it mentioned at http://es6-features.org/#ArrayElementFinding

Getters & Setters supported in ES5

Just an issue I saw on the "getters and setters" page. ES5 does support literal getters and setters in object literals. Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

Error in Symbol Type example

In http://es6-features.org/#SymbolType
Object.getOwnPropertySymbols(obj) // [ foo, bar ]
Should be
Object.getOwnPropertySymbols(obj) // [ Symbol(), Symbol() ]

In http://es6-features.org/#GlobalSymbols
shoud be
Object.getOwnPropertySymbols(obj) // [ Symbol(app.foo), Symbol(app.bar) ]

Locales

Would be grateful, if you add localization for this.

Missing semicolons

It seems like semicolons doesn't appear on ES6 examples on the pages.
If you look at features.txt:605 you see semicolons even though they're not visible on the site.

Lambda example improvement

In the lexical this the ES6 and ES5 (1st variant) examples doesn't really show any difference.
The this in lambda depends on the context where the lambda was created. Here both are assumed to be global. Had the ES6 example kept such that the lambda was created inside another function/context where the this object is something other than the global this, then it would make more sense!

Modernized vs. Traditional mismatch

Currently the examples default to ES6 using the Modernized style (no semicolons) and ES5 using the Traditional style (with semicolons). This introduces a misleading and orthogonal extra diff when comparing the various examples. Please consider making Modernized/Traditional a single setting that modifies both the ES6 and ES5 example code at the same time. And please consider defaulting it to traditional. As it stands, I hesitate to forward a link to this site to my coworkers who are just getting started with ES6 since it adds unnecessary confusion and will trigger a knee-jerk reaction against ES6 due to "ES6 is anti-semicolons!" 😉

`Proxy` bug

http://es6-features.org/#Proxing
proxy.foo === "Hello, foo"
proxy.foo === "Hello, foo!!"

support status

Hey Ralf, great work on es6-features.org
Would be nice to have each feature classified with their support status, and also I couldn't find list comprehensions, are they there and I can't find them or is it missing?
Keep it up!

Map/Set & WeakMap/WeakSet - Uncaught ReferenceError: s is not defined

The Map/Set example doesn't work

https://github.com/rse/es6-features/blob/38f6a8499116f5207806272eaa6a4a9153293068/features.txt

let m = new Map()
m.set("hello", 42)
m.set(s, 34)

confusing variable names

Hi, just a general comment. Sometimes I find the variable names used in examples completely confounding. For example, sometimes the variable name is ''dst". Sometimes it's "quud". In the latter, I guess it's supposed to signify a random variable name. In the case of the former, I'm not sure if it stands for something I can't think of. I think the code examples would be better if the variable names were more descriptive / longer.

Gitbook Version

Can you make a gitbook version of this project?

ES6 astral-plane unicode support

"Astral plane" characters (those whose code point value >= 0x10000) are supported in ES6 in the following ways:

• Iteration over strings correctly produces the code point - console.log(...'a😬c') logs "a" "😬" "c", whereas var str = 'a😬c'; for (var i = 0; i < str.length; i++) { console.log(str[i]) } logs "a" "�" "�" "c".
• In that vein, [...'a😬c'].length is the correct value of 3, rather than 'a😬c'.length's incorrect value of 4.
• String.codePointAt() lets you receive the correct code point - 'a😬c'.codePointAt(1) is '😬', but 'a😬c'[1] is '�'.

Extended Literals - confusing output from example

I understand it is written in purpose to show ES6 feature in a clear way (and it does). When I read the overview, I am trying to run the examples in the browser console and the output of "\u{20BB7}" === "𠮷" === "\uD842\uDFB7" is false. My first thought was that the browser doesn't support it yet.
I am okey when partial example give an error and I need to add some code to it, or the example with for (let codepoint of "𠮷") console.log(codepoint) gives Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode error, and I need add

(function(){ 
  "use strict";
  for (let codepoint of "𠮷") console.dir(codepoint);
})()

but if the example is valid Javascript, I think, it should give unabigouse output.

Current example

"\u{20BB7}" === "𠮷" === "\uD842\uDFB7"

output => false

Suggested

("\u{20BB7}" === "𠮷") && ("𠮷" === "\uD842\uDFB7")

or

"\u{20BB7}" === "𠮷" && "𠮷" === "\uD842\uDFB7"

or

"\u{20BB7}" === "𠮷"
"𠮷" === "\uD842\uDFB7"

EC5 Spead Operator Sample Unused Variable

The following ECMAScript 5 sample has an unused variable.

var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]
f.apply(undefined, [ 1, 2 ].concat(params)) === 9;

var str = "foo";
var chars = str.split(""); // [ "f", "o", "o" ]

The previously mentioned code should be changed to the following.

var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]
f.apply(undefined, other) === 9;

var str = "foo";
var chars = str.split(""); // [ "f", "o", "o" ]

Large Red 'X' implies ES5 snippets contain errors

The large red Xs in the top-right corners of the ES5 code snippets somewhat imply that they contain errors. Should they be taken away or changed to something else to imply that the ES6 way is better?

Block-Scoped Constants ES5 code is wrong.

This is not comparable to const: you can still re-bind the PI variable to something else, e.g. PI = 7;. Really, ES5 has no equivalent.

Certificate error on https://es6-features.org/

When visiting https://es6-features.org/ I get a certificate error.

It would be nice if reading the page was possible over a secure connection and if the http: version redirected to the https: version.

Could you please add es7 and later feature overview & comparison?

PDF Version

Hello,

Thank you for the useful information page. Can you please tell me where I can find it as a pdf file?

TypedArrays wrong?

I was looking around and in TypedArrays the example seems to not work properly for username.
In the username setter you have this._username[0] = v v is a string _username is a Uint8Array, I was wondering if there is a new feature to cast one into the other but I didn't find anything.
I understand if this is just for a example, I just want to know if there is something that I didn't catch.

Modernized style

I see that in the source code viewers there's a modernized vs traditional mode, the modernized not containing any semicolons. What makes this any modern than the semicoloned version? I personally think it's a bad practice. Worse yet, the modernized is the default for ES6, suggesting that no semicolons should be used for ES6 code.

Add listings of new built-in methods

Here's some ES5 equivalents of a few such methods to get you started.

Object.assign:

var src1 = { foo: 1, bar: 2 };
var src2 = { foo: 3, baz: 3 };
var dst = {};
Object.keys(src).forEach(function(e) {
  dst[e] = src[e];
});
Object.keys(src2).forEach(function(e) {
  dst[e] = src2[e];
});
dst.foo; // 3
dst.bar; // 2
dst.baz; // 3

Array.find:

[1,3,4,2].filter(function(e) { return e > 3; })[0]; // 4

String.prototype.repeat:

(Array(12)+",").replace(/,/g, "red"); // "redredredredredredredredredredredred"

Block-Scoped Functions code is wrong.

This is wrong. That code depicts function-scoped functions. It should actually be this:

{
    function foo() {...}
    foo();
    {
        function bar() {...}
        bar();
    }
}

ES5:

function foo() {...}
function bar() {...}
{
    foo();
    {
        bar();
    }
}