In this series on ES6, I'll be giving a little guide to each of the major new features. ES6, or ES2015, is working its way into more and more applications and frameworks, with first-class support now present in major browsers and server runtimes like Node.JS. Get you some learning!

Originally posted by Jack Preston at unwttng.com

(arrow) => 'love'

Today, it's the turn of the arrow notation. This one falls easily into the "syntactic sugar" school of new features in ES6. Inspired by their prevalence in modern Javascript (pretty much unavoidable in a callback-based asynchronous language), the arrow provides a shorthand for declaring anonymous functions. Let's take a look.

Imagine we're in one of the pretty common use-cases for simple anonymous functions, the map() method of a list:

var pets = [
  {name: 'Mrs Miggins', type: 'cat'},
  {name: 'Fido', type: 'dog'},
  {name: 'Captain Fergus', type: 'lapras'}
];

var lowerCaseNames = pets.map(function (p) {
  return p.name.toLowerCase();
});

Whilst this is already a reasonably clean-looking piece of code, it's a bit verbose. When you start to have a lot of this sort of filtering in your code, the function keywords and braces can all get a bit cluttered. Aside from that, it's just a lot of code overhead to get at quite a simple property of the object. Even if you try to shove the whole thing on one line to avoid too much indentation, it quickly gets too much:

var lowerCaseNames = pets.map(function (p) {return p.name.toLowerCase();});

Enter the arrow shorthand:

var lowerCaseNames = pets.map(p => p.name.toLowerCase());

Mmmm :) The arrow-based expression above has entirely replaced the anonymous function declaration in the previous version.

Anatomy of the Arrow

As you can see above, the structure of the arrow function definition is: parameters on the left, followed by the arrow =>, and finally the return expression. Multiple parameters should be wrapped in parentheses, for example:

(x, y) => x + y

It isn't just for simple one-liners, either. You can have entire function blocks using the good old {brace} notation that Javascript has always made use of:

(x, y, z) => {
  if (x % 2 === 0) {return x;}
  return y + z;
}

The last thing worth noting about the arrow-defined functions is that they keep the same this as that used by the code around them. This is pretty much the point where they differ from the otherwise equivalent function () {} definition style. So, the following is basically this-safe, where it wouldn't have been with the old style:

var pet = {
  name: 'Mrs Miggins',
  nicknames: ['Molly', 'Cat', 'Fuzzball'],
  getLowerCaseNicknames() {
    return this.nicknames.map(nick => this.name + ' aka ' + nick);
  }
};

In the above, this refers to pet in both cases, since the arrow shorthand preserves the this of the surrounding code.

There you have it; one of the neat shorthands introduced by ES6 that should help your code look cleaner and, importantly, take up fewer characters! Your typing fingers and your site's network profile will thank you :) Go forth and knock 'em dead with your arrow skills.

Lessons in ES6: arrow functions

(arrow) => 'love'

Anatomy of the Arrow