Thursday, December 5, 2013

Understanding ES6 Fat Arrows

I'm going to try and do this explanation by manipulating a very simple line of code and transition an anonymous function to a fat arrow function.

[1,2,3].map(function(x) { return x + 1;});

Switch (swap) function and (x):

[1,2,3].map((x) function { return x + 1;});

This does not work. Just showing that you switch the word "function" with the parameter: (x)
Replace function with => (a fat arrow). You end up with this.

[1,2,3].map((x) => { return x + 1;});

Use Firefox if you want to test this as the fat arrow function hasn't been implemented in Chrome yet.


  1. I really do not understand this fashion of modifying languages (java, now javascript). It merely ends up with codes that are not backward compatible, for little or no advantage. What is the purpose of this fat arrow ?
    Spare a few keystrokes?

    1. You don't understand that languages evolve or improve? The fat arrow is for binding. This is borrowed from CoffeeScript.

    2. Ian, you bring up an interesting point when you say that it was borrowed from CoffeeScript as I always believed that it was borrowed from C# so I did some investigating.

      C# introduced the fat arrow syntax in C# 3.0 which was release on 19 November 2007 according to Wikipedia. Wikipedia also notes that the first Git commit of CoffeeScript was on December 13, 2009 with the comment "initial commit of the mystery language."

      It looks like the fat arrow syntax was probably around for at least 2 years before it was introduced into CoffeeScript. I think that it's pretty safe to say that both languages had it working for several months before their official release date.

      I wonder if there's any other language that was using this syntax before C# 3.0?

  2. jean-pierre - you make some good points, especially about backward compatibility.

    The main arguments in favor of fat arrow syntax are brevity. You are right inasmuch as it's adding syntactic sugar to the language and no new functionality.

    If you compare these two syntaxes:
    var myfatsquare = x => x * x;
    var myfuncsquare = function(x) {return x * x};
    you'll see that the fat arrow syntax is terse compared to the traditional form. In complex code with nested callbacks (callback hell) then this will add to readability. You can make a good argument that if the long form is not easily readable then the code needs to be simplified and that fat arrow may encourage complex patterns.

    The most important reason why you need to understand this is because you may need to maintain or modify fat arrow code that someone else has written. If you're not comfortable reading this syntax then you risk taking longer to comprehend what a function is trying to do.

  3. Did you ever forget adding .bind(this) to anonymous functions
    and get strange errors? Fat arrow is not just syntax sugar
    for function, it also provides lexical binding of context (this).

    1. Good point Ivan. In fat arrow functions the value of *this* is that of the lexical parent.