Experienced JavaScript programmers take advantage of function expressions, they are used a lot in callbacks, either for DOM access or any other related setup. Another syntax addition to the upcoming ECMAScript 6 is the arrow function expression to let us write a shorter function expression.

A simple way to look at this arrow function notation (section 13.2 in the latest ES6 draft) is as a shorthand form of a normal function expression. This is best illustrated with an example. Say you want to produce the list containing the salary of every employees. By using Array map, it will look like the following snippet:

salaryList = employeeList.map(function (e) { return e.salary; });

Note the function expression as the callback for map() is rather verbose. With an arrow function expression, that construct can be shortened to:

salaryList = employeeList.map(e => e.salary);

No need for function and return. In fact, if you are about to implement the same task with other languages (such as Scala, CoffeeScript, C#), you would end up with a very similar syntax.

How does a syntax tree look like when there is an arrow function? Rather straightforward, no surprise there.


An arrow function expression is designed primary for the case where you need to return a value. However, it still works if you don’t care about returning anything and just want to execute some statements. Take a look at this example:

employeeList.forEach(e => { console.log(e.name); });

Another fun thing with such a shorthand is when you start cascading more functions. For example, if now we are interested in the average salary, this can be computed by:

var total = employeeList.map(e => e.salary).reduce((p, q) => p + q);
var averageSalary = total / employeeList.length;

That’s just way shorter and less crowded compare to function expressions everywhere. It is important to notice that if you have more than one parameter, you need to enclose the parameters with brackets.

Since an arrow function expression is just another form of an assignment expression, we can keep it as a normal object (either for further reuse or just to make it easy to follow), as illustrated in the following fragment (neat, isn’t it?):

var adder = (p, q) => p + q;
var avg = employeeList.map(e => e.salary).reduce(adder) / employeeList.length;

Combine it with array comprehension and magically it does not look to JavaScript-y anymore!

I believe the use of arrow function expression strikes a good balance between readability and expressiveness. What do you think?

  • Jeff Schwartz

    I would definitely use in new code but I wouldn’t feel compelled to modify existing code to make use of it.

    • That gives me an idea for a tool which automatically convert any safe function expression to its arrow notation.

  • Michael Brandt

    Absolutely wonderful!

  • ES6 is really making those lost helper functions much more compelling to use!

  • dpw

    very groovy. like…

  • I’ll Just Have It Black Thanks

    Another pointless layer of syntactic sugar, how lovely. I guess some build useful new data types like sets, or create new built-in functions like mappings… and others just make things 1% shinier.

  • Roy Ling

    An unexpected close parenthesis in the code example after p + q:

    var total = employeeList.map(e => e.salary).reduce((p, q) => p + q));

  • Marco

    It doesn’t solve any previous problem, so basically it’s a useless change.

    • When functional programming becomes more mainstream, arrow function is needed for conciseness and clarity.

      • Marco

        Conciseness and clarity come from programmer ability to write simple code in a simple way.
        If this is an improvement, then even changing color of your car is improving it.
        I talk of improvement when a change gives me: a simpler way to do a complex thing, a faster way to do a slow thing, a new thing I couldn’t do before.
        This is just syntax, it’s like… “hey, write ‘s’ in place of ‘t’! Great improvement!”…

        • Then we just have to agree to disagree (and without being unnecessarily snarky). Fortunately, what is useless to you might be useful to others.

    • Bernard Poulin

      There is more than syntaxic sugar: The lexical this. (not really mentioned in the text). In other words, the “this” inside the arrow function expression/body is the same as its closure context. (i.e. similar to passing a bounded function to this: i.e. function() { … }.bind(this) }. This is *extremely* useful when dealing with OO-style javascript (lots of that in Polymer for instance).

  • Cowherd

    You really should mention that it doesn’t rebind “this”.