.

Tags:

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.

arrow_function

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.

    • http://ariya.ofilabs.com/ Ariya Hidayat

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

  • Michael Brandt

    Absolutely wonderful!

  • http://twitter.com/wololodev Hamed Al-Khabaz

    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.

    • http://ariya.ofilabs.com/ Ariya Hidayat

      Why not? Not everyone wants to enjoy The Future!

  • 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));

    • http://ariya.ofilabs.com/ Ariya Hidayat

      Fixed now. Thanks for the notice!

  • Marco

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

    • http://ariya.ofilabs.com/ Ariya Hidayat

      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!”…

        • http://ariya.ofilabs.com/ Ariya Hidayat

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

  • Cowherd

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