3

I am looking to rewrite some CoffeScript code to ECMAScript 2015 (ES6).

Some syntax is very similar such as fat arrow functions:

(param1, param2, paramN) => expression

What are the key differences between ES6 => and CoffeeScript =>?

It would be good to get a heads up from people who already have been in the same situation (converting arrow functions back and forth) and could point out the pitfalls and mistakes to avoid.

Mulan
  • 129,518
  • 31
  • 228
  • 259
lazlojuly
  • 829
  • 2
  • 8
  • 19
  • 1
    I think coffee script arrow function is the one which is `fat`, not es6 arrow function :P –  Oct 26 '15 at 13:39
  • @xyz "An arrow function expression (also known as fat arrow function)" mdn.io – lazlojuly Oct 26 '15 at 13:40
  • Agreed. I get your point. –  Oct 26 '15 at 13:43
  • 1
    I have never used coffee script arrow function. But, regarding es6 arrow function, one thing to notice is, it has no `arguments` variable. –  Oct 26 '15 at 13:45
  • 1
    Looking at those docs, CoffeeScript's implementation only captures a reference to `this` and passes it into a closure. ES6's implemention ensures that the function *has no `this`* and so uses it's parent's lexically-bound `this`. Same goes for `super`, `arguments` and `new.target` - CoffeeScript's fat arrow does not "bind" these – CodingIntrigue Oct 26 '15 at 14:03
  • 2
    The official term is ["arrow function"](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-arrow-function-definitions) in ES6, no matter what MDN says. There are no "thin" arrows in ES6 (unlike CoffeeScript). – Felix Kling Oct 26 '15 at 14:42
  • 1
    Given that a coffeescript arrow basically desugars to a bound function (even if they desugar the `bind()` call into a closure), this seems like a duplicate of [What are the differences between ES6 arrow functions and bound functions?](http://stackoverflow.com/q/32535110/1048572) – Bergi Oct 26 '15 at 15:10

1 Answers1

1

Fat-arrow functions in CoffeeScript translate to your usual JavaScript functions, and bind this to its value in the lexical scope (the scope of definition). Like so:

CoffeeScript

sum = (a, b) =>
  return a + b

JavaScript transpilation

var sum;
sum = (function(_this) {
  return function(a, b) {
    return a + b;
  };
})(this);

Arrow functions in ES2015 always do this this binding.

let arrowFunction = () => this.property

translates to this in ES5

let arrowFunction = (function () { return this.property }).bind(this)

Since this can't be bound to anything else in arrow functions, they can't be used with the new keyword, since that needs to bind this to a new object.

In a "normal" JavaScript function (non-arrow) scope, there's access to a special arguments variable that is "array like" and is useful to access all the arguments that were passed to the function, regardless of the parameter signature. Of course, this is also true in CoffeeScript fat-arrow functions. In my sum example, if someone calls it as sum(1, 2, 3), one can access the third argument by doing argument[2]. Arrow functions don't provide arguments, but have "rest parameters". The latter exists in CoffeeScript too, they call it "splats".

Both CS fat-arrow functions and JS arrow functions support default parameter values. That's not a difference, I know, but worth mentioning IMO.

Esteban
  • 2,540
  • 21
  • 27