lukehoban / es6features Goto Github PK

for this statement:
Unlike functions, arrows share the same lexical this as their surrounding code.

can I simply consider

'()=>{}' 

equals to

'function(){}.bind(this)'

I've reading harmony's draft and it looks like super calls on object literals were removed:

Changes from May TC39 Review
    Tentative addition of Class Definitions Syntax [...]
    11.1.5 make super references illegal in method definitions within object literals

It does not match with the enhanced object literals section

I'm wrong? it was changed to legal again?

Relevant discussion.

Just wondering why there's no mention that semicolons are no longer needed.

How would you write this in ES6?

var EventEmitter = require("events").EventEmitter
var assign = require("react/lib/Object.assign")
...
var ProductStore = assign({}, EventEmitter.prototype, {
...
emitChange: function() {
this.emit("change")
},

I'd love to see what happens when new things go wrong -- like what happens when destructuring assignment doesn't match?

I'm currently trying to figure out what the heck the y regex sticky mode actually does (lots of varied examples that conflict, and mis-information), but I was surprised to see it's not listed here at all. Plans to cover it?

If I get to some sort of complete understanding of it soon, I'll submit a PR. But perhaps you might already have a good way to explain it that would clear up the confusion?

The description for modules says the following:

Implicitly async model – no code executes until requested modules are available and processed.

Wouldn't that be an implicitly synchronous model? Would be great to have this clarified.

In section Enhanced Object Literals:
Grammer and types -> Grammar and types

The examples are useful, but plenty of sections are too difficult to understand or just lacking 😭

For example, important concepts like Symbols are not given enough attention and the given explanation.

Hey everyone! I'm currently converting our React coffeescript files over to ES6 and i ran into this error where I tried to add a multiline string to interpolate a variable within the key's value. I came across the error below, i was wondering if this is possible to do or if i'm trying something impossible :) Thanks!

I know I could think of something you missed:

0b111110111

0o767

I didn't exactly understand the comment added to the template strings example. Maybe its just me. But I thought I'd mention.

// Construct an HTTP request prefix is used to interpret the replacements and construction

Add a section with current browser ES6 feature support?

For me it was quite hard to understand what kind of values this arbitrary function returns, so I didn't understand at the beginning how the assignment works for object matching. We could just use an object instead of this function, no?

I have Javascript link this.

someClass.js

class someClass {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayName() {
        console.log(this.name);
    }

    sayAge() {
        console.log(this.age);
    }
}

var myInstance = new someClass('dwayne', 27);
myInstance.sayName();

In cmd:

node someClass.js
It's show dwayne.

But show I want to use this class in another class like: someClassTest.js How can I call someClass.js for same result

Thanks.

It would be great if the documentation specified the source specification for the programmatic module loader API since the draft ES6 specification you link to does not include that API, and I can find no definitive source specification anywhere on the Web.

Any pointers much appreciated.

I'm trying to understand the way modules are loaded in ES6. I was googling this question for like half of hour but never found the exact definition. See the example:

import * as smth from 'dir1/dir2/dir3/file'

You can see that it's different from relative path like ./dir1/dir2/dir3/file. I was messing with this in TypeScript + NodeJS and it's lookup strategy is different from the one I used to work with in NodeJS. What I found is that

1. it will lookup for dir1 which is defined ABOVE the current file.
2. If it finds dir1 it tries to find dir2/dir3/file there.
3. if it fails it continues step 1-2 again and so on.

Is my assumption correct?

Might be worth indicating such, as there is no requirement that JS runtimes outside of browsers implement proto?

Your explanation is great, but I have tried to find definitive answer to what api the iterator will have. Your explanation is another example to support one of the two I have found, do you know if it is the latest? And could you make that clear in the document?

The two I have found are:

// Yours and (https://people.mozilla.org/~jorendorff/es6-draft.html#sec-common-iteration-interfaces)
var iterable = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
        // alt. return { done: true, value: IteratorReturn || undefined }
      }
    }
  }
}

and

// Harmony wiki. (http://wiki.ecmascript.org/doku.php?id=harmony:iterators)
var iterable = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return cur
        // alt. throw new StopIteration()
      }
    }
  }
}

It would be awesome to be able to see performance comparisons between ES6 features and the ES5 way of doing the same or similar thing.

For instance, with fat arrows, I've love to see the performance comparison between:

• (function(){})()
• (function(){}).bind(this)()
• (=>)()

In other languages, we always a method to format datetime which called strftime.
I think we should add this method to es6 or es7

E.g., let {x, y} = point; or better.

/be

Hi, this summary is great! It's a great balance of concise and thorough.

Sometimes I do want more details and end up on a relevant MDN page. What do you think about adding links to further information on MDN?

I can put together a PR if that sounds useful.

Thx,
Dan

I test new Proxy in io.js(v3.1.0), an error was threw: "Proxy is not a function". And I found that we should create Proxy with Proxy.create now. So, maybe you should update this.

Thank you for your great work!!
I'd like to translate this to Japanese, so I want to know the license of this article.
Could you add a license note or something.
Thanks for your kindness.

Fail-soft destructuring is already shown, so it may make sense to add destructuring defaults, too.

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

var {b = 2} = {};
b === 2;

var {c = 3} = {c: undefined};
c === 3;

Example of 'Construct an HTTP request prefix' in 'Template Strings' is not clear.

The following code:

// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

is not clear to me. Is GET a function defined in ES6 spec?. How can I test it? Is there a simpler example that would show intention of this example?

// Construct a DOM query

This seems to be left overs from an earlier example.

Under enhanced object literals it would look like __proto__ wasn't available before, however, it appears to be, as I am using that functionality in node 0.10.

Hi, in the example you use the call handler, while it's not present in the list of the available traps in the following list.

I I have translated to brazilian portuguese, in a repository that lists all kind of material. Feel free to point a link, if you wish.
Thanks for the article!
Final repository: https://github.com/cerebrobr/es6features
my translation: https://github.com/letanure/es6features

They're a somewhat major new ES6 feature, despite being in browsers already.

some nice extended destructuringexamples from: http://www.2ality.com/2015/01/es6-destructuring.html

let {length : len} = 'abc'; // len = 3
let {toString: s} = 123; // s = Number.prototype.toString

let [x,...y] = 'abc'; // x='a'; y=['b', 'c'];

Instead of

var fibonacci = {
  [Symbol.iterator]() {
    var pre = 0, cur = 1;
    return {
      next() {
        var temp = pre; pre = cur; cur += temp;
        return { done: false, value: cur }
      }
    }
  }
}

use this:

let fibonacci = {
  [Symbol.iterator]() {
    let pre = 0, cur = 1;
    return {
      next() {
        [pre, cur] = [cur, pre + cur];
        return { done: false, value: cur }
      }
    }
  }
}

I threw in let usage over var for free :-P.

/be

const x = { 'hello': 'world' };
x['hello'] = 'alien';
console.log(x['hello']); // prints 'alien'
x = { }                  // fails silently.
console.log(x['hello']); // still prints 'alien'

This (correctly) prints 'alien' but may not be apparent to many people. I think this should be at least noted in the example.

Perhaps steal something like slides 31-33 from http://1drv.ms/No2Fl4.

When you return from the inner call to factorial, there is still a pending * operation, so the call is not actually in tail position. I believe you want to add an accumulator.

var nums = evens.map((v, i) => v + i);
nums returns [0,3,6..]
why not v-i that returns [1,2,3]

... confused

The tail call example is not in proper tail call position, because it does not define the strictness of the function.

You might want to mention that String methods that accept RegExp arguments delegate to the RegExp which means that you can do things like:

class SpecialRegExp extends RegExp {
//define a new kind of RegExp where }{ has special meaning
...
}
found = someString.match(SpecialRegExp("}{"));

Does it make sense to rename this repository to ES2015?

Or at least make reference to it in the content so that teh googles can find it?

Just a thought.

Thanks for the good work on this repo!

Maybe you have a typo in Modules (in Readme) in mathplusplus

export * from "lib/math";
should be
import * from "lib/math";

or maybe I am wrong :)

GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

I don't understand this example; can we have more explanation on this? Otherwise it looks bugged for me.

Is [0,0,0].fill(7,1) [0,7,7] ? Apologies if I misremembered the syntax. Reviewing on my phone.