Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Resumo

Uma expressão arrow function possui uma sintaxe mais curta quando comparada a uma expressão de função (function expression) e não faz o bind do this. Arrow functions sempre são anônimas.

Sintaxe

(param1, param2, ..., paramN) => {
   statements
}

// ou

param => {
    statments
}

// ou

param => expressions // equivalente a param => { return expressions; }

// ou

(param1, param2, ..., paramN) => (
    expressions
)

Exemplos de sintaxe 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 não faz o bind do this.

Funções mais curtas

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

var materiais = [
  'Hidrogenio',
  'Helio',
  'Litio',
  'Berilio'
];

var materiaisTam = materiais.map(function (material) {
    return material.length
});

// materiaisTam = [ 11, 5, 5, 7 ]

var materiaisTam2 = materiais.map( material => material.length );
// materiaisTam2 = [ 11, 5, 5, 7 ]

Sem this separados

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.

 

Uso da propriedade prototype

Arrow functions não têm a propriedade prototype.

var func = () => {};
console.log(func.prototype); // undefined

Uso do operador new

Arrow functions não podem ser usadas como construtores. E se forem usadas para tal, retornarão um erro.

var Func = () => {};
var func = new Func(); // TypeError: Func is not a constructor

Corpo de função

Arrow functions podem ter um corpo conciso ("concise body") ou o usual corpo em bloco ("block body").

Em um concise body, apenas uma expressão é especificada, o que se torna um returno de valor. Em um block body, você precisa explicitamente usar a declaração de retorno, ou seja, o return.

var func = x => x * x;                  
// sintaxe de concise body. O "return" é implícito

var func = (x, y) => { return x + y; }; 
// Em um função com block body, é necessário um "return" explícito

 

Exemplos

// Uma arrow function vazia retorna undefined
let empty = () => {};

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

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

var complexo = (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.
Padrão Definição inicial.

Compatibilidade com Navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

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

Última atualização por: leandrowf,