MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Arrow functions

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

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

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Arrow Function Definitions' in that specification.
Standard Definição inicial.

Compatibilidade com Navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte Básico Não suportado 22.0 (22.0) Não suportado Não suportado Não suportado
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte Básico Não suportado (Yes) 22.0 (22.0) Não suportado Não suportado Não suportado

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.

Etiquetas do documento e colaboradores

 Colaboradores desta página: RodrigoOler, lucasmedeiros
 Última atualização por: RodrigoOler,