Quando e por que vale a pena usar as funções de seta ES6 e quando não

Olá Habr! Apresento a você a tradução do artigo " Quando (e por que) você deve usar as funções de seta ES6 - e quando não deve ", de Cynthia Lee.

As funções de seta são o recurso mais popular do ES6. Esta é uma maneira nova e concisa de escrever funções.

function timesTwo(params) { return params * 2 } timesTwo(4); // 8 

Agora o mesmo com a função de seta.

 var timesTwo = params => params * 2 timesTwo(4); // 8 

Muito mais curto! Podemos omitir chaves e a declaração de retorno (se não houver bloco, mas mais sobre isso posteriormente).

Vamos descobrir como o novo método difere do método usual.

Sintaxe

A primeira coisa que você notará rapidamente são as várias variações de sintaxe. Vejamos os principais:

1. Sem parâmetros

Se a função não tiver parâmetros, você pode simplesmente escrever parênteses vazios antes de =>

 () => 42 

Na verdade, você pode ficar sem suportes!

 _ => 42 

1. Um parâmetro

Os parênteses também são opcionais

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

3. Vários parâmetros

Aqui precisamos de parênteses

 (x, y) => 42 

4. Instruções

Geralmente, uma expressão funcional retorna um valor, enquanto uma instrução é responsável pela ação.

Deve-se lembrar que, no caso de funções de seta, se tivermos um conjunto de ações / instruções, devemos usar chaves e a declaração de retorno.
Aqui está um exemplo de função de seta usada com a instrução if:

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } } 

5. O corpo do bloco fúngico

Mesmo que sua função simplesmente retorne valores, mas seu corpo esteja entre chaves, a instrução de retorno é necessária.

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

6. literal do objeto

Se a função retornar um literal de objeto, ela deverá estar entre parênteses.

 x =>({ y: x }) 

Funções de seta - anônimas

Observe que as funções das setas são anônimas; elas não têm um nome.

Isso cria algumas dificuldades:

1. Difícil de degradar
   
   Quando isso acontece, você não poderá rastrear o nome da função e o número da linha onde ocorreu o erro.
   
2. Não pode ser atribuído a uma variável
   
   Se você precisar de um link dentro da função para algo (recursão, um manipulador de eventos que precisa ser desfeito), nada funcionará
   

Principal vantagem: não isso

Nas funções regulares, isso indica o contexto em que essa função é chamada. essa função da seta é a mesma do ambiente em que a função seta é declarada.

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

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

No exemplo acima, você deve usar .bind (this) para passar o contexto para a função. Caso contrário, isso será indefinido.

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

Neste exemplo, você não precisa vincular isso. A função de seta retira isso do fechamento.

Quando usar as funções de seta

Agora, acho, ficou claro que as funções de seta não substituem as comuns.

Aqui estão alguns exemplos em que é improvável que você queira usá-los.

1. Métodos de objeto

Quando você chama cat.jumps, o número de vidas não diminui. Isso ocorre porque isso não está vinculado a nada e herda o valor do fechamento.

 var cat = { lives: 9, jumps: () => { this.lives--; } } 

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

Se você precisar de um contexto dinâmico, uma função de seta é uma opção ruim.

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

Se clicarmos no botão, obtemos um TypeError. Isso ocorre porque isso não está vinculado a um botão.

3. Quando a legibilidade do código piora

Com as funções usuais, fica sempre claro o que você queria dizer. Com pontas de seta, dadas as variadas opções de sintaxe, algumas coisas se tornam menos óbvias.

Quando exatamente vale a pena usar as funções de seta

As funções de seta são ótimas para casos em que você não precisa do seu próprio contexto de função.

Também gosto muito de usar as funções de seta em todos os tipos de map e reduce - o código lê dessa maneira melhor.