Arrow Function em JavaScript: =>, this e quando usar

Uma forma mais enxuta de escrever funções

A arrow function é a sintaxe mais compacta do JavaScript para declarar uma função. Ela apareceu no ES2015 e hoje é o estilo padrão para funções pequenas e inline — principalmente em callbacks passados para métodos de array, handlers de promises e listeners de eventos.

A estrutura é simples: parâmetros, depois =>, e por fim o corpo da função.

Mesmo resultado da forma tradicional:

const add = function (a, b) {
    return a + b;
};

Digitar menos é bom, mas os motivos que realmente importam para se preocupar com arrow functions são o return implícito e a forma como elas lidam com o this. Vamos ver os dois a seguir.

Return implícito

Quando o corpo da função é uma única expressão, dá pra omitir as chaves e o return. O valor da expressão é retornado automaticamente:

É aqui que as arrow functions brilham — transformações de uma linha ficam com cara de fórmula matemática:

No momento em que você precisa de mais de uma instrução, volta pra usar chaves e um return explícito:

Esquecer o return dentro das chaves é o erro mais comum com arrow functions. x => { x * 2 } retorna undefined — as chaves transformam o corpo em um bloco, e a expressão lá dentro é simplesmente descartada.

Parênteses nos parâmetros

Quando há exatamente um parâmetro, os parênteses são opcionais:

Com zero, dois ou mais parâmetros, os parênteses são obrigatórios:

Algumas equipes preferem usar parênteses sempre, só por consistência. Os dois estilos são válidos — escolha um e mantenha o padrão.

Retornando um objeto literal

Aqui tem uma pegadinha clássica. Quando você tenta retornar um objeto de forma implícita, as chaves acabam sendo interpretadas como o corpo da função:

Isso imprime undefined. O JavaScript interpreta { name: name } como um bloco de código com um rótulo, e não como um objeto literal. Para forçar a leitura como expressão, envolva o objeto em parênteses:

Colocar () em volta de { ... } resolve. Guarde isso na cabeça — você vai esbarrar nesse detalhe já na primeira semana escrevendo arrow functions.

this léxico em arrow functions

O motivo real das arrow functions existirem não é a sintaxe enxuta. É que elas não têm o próprio this. Em vez disso, herdam o this do escopo ao redor.

Para entender por que isso faz tanta diferença, veja uma função tradicional sendo usada como callback:

Dentro da function () { ... } passada para o setInterval, o this não é counter. Funções tradicionais recebem seu próprio this de acordo com a forma como são chamadas, e o setInterval invoca o callback com this valendo undefined (em modo estrito) ou o objeto global.

Já uma arrow function preserva o this do método que a envolve (o famoso lexical this):

Dentro da arrow function, o this continua sendo counter, porque a arrow não cria um this próprio. Antes das arrow functions, o pessoal driblava isso com const self = this; ou .bind(this). Esses truques ainda funcionam, mas hoje raramente são necessários.

O que a arrow function não tem

A regra do this léxico faz parte de um padrão maior: as arrow functions abrem mão de várias coisas que as funções tradicionais têm.

• Não tem this próprio — ele é herdado do escopo externo.
• Não tem objeto arguments — use rest parameters (...args) no lugar.
• Não funciona com new — não dá para usar arrow function como construtor.
• Não tem a propriedade prototype — consequência direta de não aceitar new.

...args te dá a mesma capacidade de "aceitar qualquer número de argumentos" que o arguments oferecia, com o bônus de ser um array de verdade. Já a chamada new Greeter(...) quebra porque arrow functions não são construtores.

Quando não usar uma arrow function

Arrow functions são a escolha padrão para callbacks, mas existem alguns casos em que elas são a opção errada:

Métodos de objeto definidos com a sintaxe de arrow não recebem o this amarrado ao objeto — eles herdam o this do lugar onde o literal do objeto foi escrito (normalmente o escopo do módulo ou global). Para métodos, use a sintaxe curta (greet() { ... }).

A mesma lógica vale para métodos no prototype de uma classe, para handlers de evento em que o this precisa apontar para o elemento, e para qualquer função que você pretenda chamar com new. Nesses casos, a ferramenta certa é a function tradicional.

Regra prática rápida

• Callback curto, uma única expressão? Arrow function.
• Precisa que o this continue amarrado ao escopo externo? Arrow function.
• Vai definir um método em um objeto ou no prototype de uma classe? Função tradicional (ou sintaxe curta de método).
• Escrevendo um construtor? Função tradicional — ou, melhor ainda, uma class.

Qualquer código JavaScript do mundo real mistura os dois estilos. Saber qual combina com cada situação leva umas semanas lendo código dos outros — depois disso, a escolha sai no automático.

A seguir: parâmetros e valores padrão

Arrow functions e funções tradicionais compartilham os mesmos recursos de parâmetros — valores padrão, rest parameters, desestruturação de argumentos e por aí vai. É o tema da próxima página, e vale para todas as formas de função que vimos até aqui.