Quando (e por que) usar as arrow functions da ES6 — e quando não as usar

Artigo original: When (and why) you should use ES6 arrow functions — and when you shouldn’t

Escrito por: Cynthia Lee

As arrow functions são, certamente, um dos recursos mais populares da ES6. Elas trouxeram uma nova maneira de escrever funções concisas.

Aqui temos uma função escrita com a sintaxe da ES5:

function vezesDois(params) {
  return params * 2
}

vezesDois(4);  // 8

Agora, veja a mesma função expressa como uma arrow function:

var vezesDois = params => params * 2

vezesDois(4);  // 8

Ela fica muito menor! Conseguimos omitir as chaves e a instrução de retorno (return) em função dos returns implícitos (mas apenas se não houver um bloco — falarei mais sobre o assunto abaixo).

É importante entender como as arrow functions se comportam de modo diferente das funções ES5 normais.

Variações

Algo que você perceberá rapidamente é a variedade de sintaxes disponíveis nas arrow functions. Vamos examinar algumas das mais comuns:

1. Sem parâmetros

Se não houver parâmetros, você pode colocar um parênteses vazio antes da =>.

() => 42

De fato, você não precisa nem mesmo dos parênteses!

_ => 42

2. Um único parâmetro

Com essas funções, os parênteses são opcionais:

x => 42  || (x) => 42

3. Vários parâmetros

Os parênteses são necessários para essas funções:

(x, y) => 42

4. Instruções (em contraste com as expressões)

Em sua forma mais básica, uma expressão de função produz um valor, enquanto uma instrução de função realiza uma ação.

Com a arrow function, é importante recordar que as instruções precisam ter chaves. Quando as chaves estão presentes, você também precisará sempre do return.

Aqui temos um exemplo de arrow function usada com uma instrução if:

var alimentarOGato = (gato) => {
  if (gato === 'com fome') {
    return 'Alimentar o gato';
  } else {
    return 'Não alimentar o gato';
  }
}

5. "Corpo do bloco"

Se a sua função estiver em um bloco, é preciso usar a instrução return explicitamente:

var somarValores = (x, y) => {
  return x + y
}

6. Literais de objetos

Se estiver retornando um literal de objeto (object literal, em inglês), ele precisa estar envolvido por parênteses. Isso força o interpretador a avaliar o que está dentro do parênteses e o literal de objeto é retornado.

x =>({ y: x })

Sintaticamente anônima

É importante observar que as arrow functions são anônimas, o que significa que elas não são nomeadas.

Esse anonimato cria alguns problemas:

1. É mais difícil de depurar (debug)

Ao encontrar um erro, você não conseguirá rastrear o nome da função ou a linha exata onde o erro ocorreu.

2. Sem autorreferência

Se a sua função precisar de uma autorreferência em algum momento (por exemplo, para recursão, como manipulador de evento que precisamos desvincular - em inglês, unbind), ela não funcionará.

Principal benefício: "this" não fica vinculado

Nas expressões de função clássicas, a palavra-chave this é vinculada a valores diferentes com base no contexto onde a função é chamada. Com as arrow functions, porém, this está vinculado lexicalmente. Isso quer dizer que ela usa o this do código que contém a arrow function.

Por exemplo, vejamos a função setTimeout abaixo:

// ES5
var obj = {
  id: 42,
  contador: function contador() {
    setTimeout(function() {
      console.log(this.id);
    }.bind(this), 1000);
  }
};

No exemplo da ES5, .bind(this) é necessário para ajudar a passar o contexto de this para a função. Do contrário, por padrão, this seria undefined.

// ES6
var obj = {
  id: 42,
  contador: function contador() {
    setTimeout(() => {
      console.log(this.id);
    }, 1000);
  }
};

As arrow functions da ES6 não podem ser vinculadas à palavra-chave this. Por isso, elas subirão um escopo, lexicalmente falando, e usarão o valor de this no escopo no qual elas foram definidas.

Quando você não deve usar as arrow functions

Após aprender um pouco mais sobre arrow functions, espero que você entenda que elas não substituem funções regulares.

Aqui temos algumas instâncias onde, provavelmente, não seria uma boa ideia usá-las:

1. Métodos de objetos

Ao chamar gato.saltar abaixo, o número de vidas não diminui. Isso ocorre porque this não está vinculado a nada, herdando o valor de this de seu escopo pai.

var gato = {
  vidas: 9,
  saltar: () => {
    this.vidas--;
  }
}

2. Funções de callback com contexto dinâmico

Se você precisa de que seu contexto seja dinâmico, as arrow functions não são a escolha certa. Vejamos este manipulador de evento abaixo:

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

Se você clicar no botão (button), verá um TypeError. Isso ocorre porque this não está vinculado ao botão, mas ao escopo pai.

3. Quando elas tornarem seu código menos legível

Vale a pena levar em consideração a variedade de sintaxes que tratamos aqui. Com as funções regulares, as pessoas sabem o que devem esperar. Com as arrow functions, pode ser difícil decifrar o que você está vendo de maneira direta.

Quando você deve usá-las

As arrow functions têm seu momento de glória em tudo aquilo que exija que this esteja vinculado ao contexto, e não à própria função.

Apesar de serem anônimas, eu gosto de usá-las com métodos como map e reduce, pois acho que tornam meu código mais legível. Para mim, as vantagens são maiores que as desvantagens.

Obrigado por ler este artigo. Compartilhe-o se você gostou! Confira, também, outros artigos da autora, como How I built my Pomodoro Clock app, and the lessons I learned along the way (texto em inglês), e Let’s demystify JavaScript’s ‘new’ keyword (texto em inglês).