Arrow Function

Let's look at the features in ECMAScript 6, the latest draft of JavaScript that becomes more and more functional. (Although it is still a draft, most of features have been implement in Firefox.)

Why we call it arrow function? I don't know. But if you have seen -> in Haskell, or => in Scala, you might find all anonymous function used the arrow.

Arrow function is only implemented in Firefox 22+, so that please try our demo code in Firefox. SyntaxError will be thrown even in Chrome.

Define an Arrow Function

You may define an arrow function in two ways:

([param] [, param]) => {
   statements
}

param => expression

Simple expression can be writen inline, while multiple statements should be placed in block {}.

Why Using Arrow Function

Let's write a function that doubles each element of array using traditional anonymous function:

var a = [1,2,3,4,5];
a.map(function(x){ return x*2 });

And we write this function using arrow function:

var a = [1,2,3,4,5];
a.map(x => x*2);

We only remove function, return and block, right? If you think the difference is not significate, you may just get used to traditional anonymous function in JavaScript. Howerver, all of function, return and block do not need to be explicitly existed in our code, since it's just a simple maping of x to x*2.

Arrow function like map(x => x*2) makes more sense. Because the anonymous function we need has only one thing to do. That is, we need a function f that maps x to y. The best representation for this requirement is f = (x => x*2).

Lexical this

If the reasons we mentioned above can not convince you to change the traditional way you define an anonymous function, please think about how the traditional way will lead to annoying var self = this while we're doing OO programming.

var Multipler = function(inc){
  this.inc = inc;
}
Multipler.prototype.multiple = function(numbers){
  return numbers.map(function(number){
    return this.inc * number;
  })
}
new Multipler(2).multiple([1,2,3,4])
// => [NaN, NaN, NaN, NaN]
// not worked as we expected,
// because this.inc in map refers to global variable window

Multipler.prototype.multiple = function(numbers){
  var self = this; // refer self to Multipler
  return numbers.map(function(number){
    return self.inc * number;
  })
}
new Multipler(2).multiple([1,2,3,4]) // => [ 2, 4, 6, 8 ]

Weird, isn't it? It is a bug in JavaScript, But you may seen lot of such tricky this while doing interview tests.

How about using arrow function:

Multipler.prototype.multiple = function(numbers){
  return numbers.map(number => number*this.inc)
}

console.log(new Multipler(2).multiple([1,2,3,4])) // => [ 2, 4, 6, 8 ]

Woohoo, we don't need var self = this any more. this in arrow function may automatically capture this of outer function, in this case, Multipler.

code