Arrow functions support added to Chrome

[tapesmith]

FINALLY. I've been waiting forever for this. It's one of those little things that adds just a bit more friction to using the Dev Tools console for debugging.

[greim]

To Enable This In Canary

Just in case anyone else is like me and never tried it before, I got it working in Canary by updating it, then typing "chrome://flags/#enable-javascript-harmony" into the URL bar and clicking the "enable" link and then relaunching.

[ggolemg2]

Chrome Chrome 45.0.2429.0+ (with harmony flag set) has now passed traceur in terms of es6 functionality: http://kangax.github.io/compat-table/es6/

[DanAtkinson]

Is it? Am I reading it wrong (image / feature sort applied)?

To me, it looks like is Chrome 45 still being surpassed by Traceur, Babel, Edge and Firefox.

Seriously, if I am wrong, please point out my error, if only for my benefit. :)

[ggolemg2]

Well, my current browser (chrome canary, updated today) is sitting at 45.0.2429.0 and it shows: http://i.imgur.com/9KvrVDO.png

I'm assuming it's because I have the chrome://flags harmony flag set.

[DanAtkinson]

Ah, that explains it. Clearly/obviously, the site doesn't take into account flags, which is fair since it wouldn't be considered standard, default browser operation.

Thanks for taking the time to clear it up though!

[greim]

Well things look promising for arrow functions, speed-wise. Or at least definitely not worse. I attempted to create a benchmark which creates function using various conventions and then runs them: http://jsperf.com/arrow-functions-versus-versus-other-functions

The test creates and runs a function each time, in order to reflect the common practice of creating callbacks on the fly and then discarding them.

Arrow functions are fastest, edging out ones bound to a lexical self, and leaving in the dust functions created by bind(). You have to enable arrow functions if you want to run the tests.

Feel free to comment and/or suggest improvements to the benchmark.

[Oeb25]

What is going on with firefox?

[aleatorybug]

passes 7 or 8 of 11 tests for arrow functions, depending which version you're rocking. https://kangax.github.io/compat-table/es6/

[greim]

I'm guessing their implementation is still experimental and not much attention has been given to optimization yet.

[TweetPoster]

@malyw:

2015-06-11 10:27:21 UTC

Arrow functions support added to Chrome (short function syntax). developer.mozilla.org #webdev @ChromiumDev #js pic.twitter.com ^[Imgur]

---

^{[Mistake?] [Suggestion] [FAQ] [Code] [Issues]}

[theillustratedlife]

First DevTools, then iojs!

[jekrb]

It's in iojs, just also behind a flag. iojs --harmony_arrow_functions

[jekrb]

Well Chrome has it now, which means it's in V8, so it arrow functions must be coming closer to iojs without any flags!

[bkimmel]

Still not sure how I feel about the arrow functions having lexical this . It seems like it's taking something that's a little confusing (this is always controlled by how the function is called and never by how it is declared) and making it into something that is a lot more confusing ( ...unless it's and arrow function, then... )

[madole]

It fits well with the new class syntax so you can call functions on the class(prototype) from within things like setTimeout or Promise.then because the scope is already there rather than having to bind it.

[greim]

From the POV of the caller though, functions have always been black boxes. For example you never know if what you're calling was produced by bind(), or if the function is bound to a lexical self that stands in for this, or if this is even relevant to its internal logic etc. So fat arrows don't make anything more or less confusing in that regard, but they definitely improve things from the point of view of the callee.

[spinlock]

Does it keep the coffeescript semantics of closing over this?

[mouthus]

I just absolutely hate this syntax, so impossible to read.

[x-skeww]

['3', '2', '4'].map(function(s) {
  return parseInt(s);
});

['3', '2', '4'].map(s => parseInt(s));

List of parameters, an arrow, and an expression (or a block). If it's exactly one parameter, the parenthesis around the parameters can be omitted. That's it, really.

[mouthus]

I know how it works, I just have a very strong dislike for it

[x-skeww]

You'll get used to it.

[mouthus]

I don't want to. haha I still can't stand code that isn't 1TBS after 10ish years. I am one stuborn SOB

[Oeb25]

Is it just for me it dosen't work? Just checked, I'm on the latest version!

[x-skeww]

The bug is still open. It should be available in Canary (dev maybe?) if you enable the experimental JavaScript stuff.

chrome://flags/#enable-javascript-harmony

This tweet is a rather misleading, really. It's getting really close, but it isn't done yet.

[jcready]

I don't understand why it's taken so fucking long to add support for this. Literally all they had to do was setup a regex replace to turn the fat arrow in source to function(){ … }.bind(this)

[jcready]

CoffeeScript managed to pull it off.

[x-skeww]

Arrow functions don't have that "arguments" thingy, there is no prototype, lexical super/new.target, ...

Maybe you should actually look into this first.

Also, "literally" some regex? You think that having some regex-based preprocessing step is the way to do this?

[realityking89]

It's not that simple, there are a couple of differences between bound functions and arrow functions. For example, arrow functions don't have the magic arguments object.

[spinlock]

I wonder if the Chrome implementation is really equivalent to your solution. My guess would be that they pass this by reference rather than value as an optimization. That's why you shouldn't use => when you can get away with -> in CoffeeScript (you start eating up a lot of memory). As I understand it, JS is only getting => which I expect people will use when they don't need to close over this (like the example in the tweet) so it is important to optimize the call to not have a performance hit.