Arrow functions

This is an experimental technology, part of the Harmony (ECMAScript 6) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

Summary

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value. Arrow functions are always anonymous.

Expression
Implemented in: Firefox 22 (SpiderMonkey 22)
ECMA Version: ECMAScript 6th Edition (Draft)

Syntax

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

param => expression

Detailed syntax examples can be seen here.

Parameters

param
The name of an argument. Zero arguments need to be indicated with (). For only one argument the parentheses are not required. (like foo => 1)
statements or expression
Multiple statements need to be enclosed in braces, {}. A single expression, however, requires no braces. The expression is also the implicit return value of that function.

Description

Two factors influenced the introduction of arrow functions: shorter functions and lexical this.

Shorter functions

In some functional patterns, shorter functions are welcome. Compare:

var a = [
  "We're up all night 'til the sun",
  "We're up all night to get some",
  "We're up all night for good fun",
  "We're up all night to get lucky"
];

var a2 = a.map(function(s){ return s.length });

var a3 = a.map( s => s.length );

Lexical this

Until arrow functions, every new function defined its own this value (a new object in case of a constructor, undefined in strict mode function calls, the context object if the function is called as an "object method", etc.). This proved to be annoying with an object-oriented style of programming.

function Person() {
  // The Person() constructor defines `this` as itself.
  this.age = 0;

  setInterval(function growUp() {
    // In nonstrict mode, the growUp() function defines `this` as the global object, which is different from the `this` defined 
    // by the Person() constructor.
    this.age++;
  }, 1000);
}

var p = new Person();

In ECMAScript 3/5, this issue was fixed by assigning the value in this to a variable that could be closed over.

function Person() {
  var self = this; // Some choose `that` instead of `self`. Choose one and be consistent.
  self.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `self` variable of which the value is the expected object.
    self.age++;
  }, 1000);
}

Alternatively, a bound function could be created so that the proper this value would be passed to the growUp function.

Arrow functions capture the this value of the enclosing context, so the following code works as expected.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

Relation with strict mode

Given that this is lexical, strict mode rules with regard to this are just ignored.

var f = () => {'use strict'; return this};
f() === window; // or the global object

The rest of strict mode rules apply normally.

Examples

// An empty arrow function returns undefined
let empty = () => {};

(() => "foobar")() // returns "foobar" 

var simple = a => a > 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

var complex = (a, b) => {
    if (a > b) {
        return a;
    } else {
        return b;
    }
}

Specification

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Not supported 22.0 (22.0) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support Not supported 22.0 (22.0) Not supported Not supported Not supported

Firefox Note

The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of "use strict"; is now required.

This syntax is similar to Expression Closures added in Firefox 3 (details: Javascript 1.8)

Document Tags and Contributors

Last updated by: BlindWanderer,