Arrow functions

Resumo

Uma expressão arrow function possui uma síntaxe mais curta quando comparada com expressões de função (function expressions) e vincula o valor de this de maneira léxica. Arrow functions sempre são anônimas.

Síntaxe

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

param => expression

Exemplos de síntaxe detalhados podem ser vistos aqui.

Parâmetros

param

O nome de um argumento. Ausência de argumentos precisa ser indicada com ().  Para apenas um argumento os parentêses não são requeridos. (como  foo => 1)

statements ou expressions

Múltiplas declarações precisam ser envolvidas entre chaves, {}. Uma única expressão, entretanto, não exige chaves. A expressão é também o valor de retorno da função.

Descrição

Dois fatores influenciaram a introdução das arrow functions: funções mais curtas e this léxico.

Funções mais curtas

Em alguns padrões funcionais, funções mais curtas são bem-vindas. Compare:

var a = [
  "Hidrogenio",
  "Helio",
  "Litio",
  "Berilio"
];

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

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

this léxico

Antes das arrow functions, toda nova função definia seu próprio valor de this (um novo objeto no caso de um construtor, undefined em chamadas de funções com strict mode, o objeto de contexto se a função é chamada como um "método de objeto", etc.). Este comportamento é importuno com um estilo de programação orientado a objeto.

function Pessoa() {
  // O contrutor Pessoa() define `this` a si próprio.
  this.idade = 0;

  setInterval(function crescer() {
    // Em modo não estrito, a função crescer() define `this` 
    // como o objeto global, que é diferente ao `this`
    // definido pelo construtor de Pessoa().
    this.idade++;
  }, 1000);
}

var p = new Pessoa();

No ECMAScript 3/5, este comportamento era corrigido definindo o valor em this à uma variável que pudesse ser encapsulada.

function Pessoa() {
  var self = this; // Alguns escolhem `that` ao invés de `self`. 
                   // Escolha uma e seja consistente.
  self.idade = 0;

  setInterval(function crescer() {
    // O callback referência a variável `self` a qual
    // o valor é o objeto esperado.
    self.idade++;
  }, 1000);
}

Alternativamente, uma função de ligação pode ser criada para que o valor adequado de this seja passado para a função crescer.

Arrow functions capturam o valor de this do contexto vinculado,  deste modo o código a seguir funciona conforme esperado.

function Pessoa(){
  this.idade = 0;

  setInterval(() => {
    this.idade++; // |this| corretamente referência ao objeto Pessoa
  }, 1000);
}

var p = new Pessoa();

Relação com strict mode

Considerando que this é léxico, as regras de strict mode em relação ao this são apenas ignoradas.

var f = () => {'use strict'; return this};
f() === window; // ou o objeto global

O restante das regras do strict mode são aplicadas normalmente.

Exemplos

// Uma arrow function vazia retorna 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;
    }
}

Especificações

Compatibilidade com Navegadores

Notas específicas do Firefox

• A implementação inicial de arrow functions no Firefox as fez automaticamente estrita. Isto foi alterado no Firefox 24. O uso de  "use strict"; é necessário agora.
• Arrow functions são semânticamente diferentes das não padronizadas Expression Closures adicionadas no Firefox 3 (detalhes: Javascript 1.8), para as Expression Closures não vincular o this léxicamente.