Funções da seta JavaScript: por que são necessárias, como lidar com elas, quando usá-las e quando não

Uma das inovações mais notáveis ​​do JavaScript moderno é o aparecimento de funções de seta, que às vezes são chamadas de funções de seta "gordas". Ao declarar essas funções, eles usam uma combinação especial de caracteres - => .

As funções de seta têm duas vantagens principais sobre as funções tradicionais. O primeiro é uma sintaxe muito conveniente e compacta. A segunda é que a abordagem para trabalhar com this nas funções de seta parece mais intuitiva do que nas funções comuns.


Às vezes, essas e outras vantagens levam ao fato de que a sintaxe da seta recebe uma preferência incondicional sobre outras formas de declarar funções. Por exemplo, a popular configuração de eslint do Airbnb força que sempre que uma função anônima é criada, essa função seria do tipo flecha.

No entanto, como outros conceitos e mecanismos usados ​​na programação, as funções de seta têm seus prós e contras. Seu uso pode causar efeitos colaterais negativos. Para usar as funções de seta corretamente, você precisa conhecer os possíveis problemas associados a elas.

O material, cuja tradução publicamos hoje, se concentrará em como as funções de seta funcionam. Aqui, consideraremos situações em que seu uso pode melhorar o código e situações em que eles não devem ser usados.

Apresenta funções de seta em JavaScript

As funções de seta no JavaScript são algo como funções lambda em Python e blocos em Ruby.

Essas são funções anônimas com uma sintaxe especial que recebem um número fixo de argumentos e funcionam no contexto do escopo que os inclui, ou seja, no contexto da função ou outro código no qual eles são declarados.

Vamos falar sobre isso com mais detalhes.

Arrow Funções de seta de sintaxe

As funções de seta são construídas de acordo com um único esquema, enquanto a estrutura de funções pode ser, em casos especiais, simplificada. A estrutura básica da função de seta é assim:

 (argument1, argument2, ... argumentN) => { //   } 

A lista de argumentos da função está entre parênteses, seguida por uma seta composta de caracteres = e > e, em seguida, vem o corpo da função entre chaves.

Isso é muito semelhante ao funcionamento das funções comuns, as principais diferenças são que a palavra-chave function é omitida aqui e uma seta é adicionada após a lista de argumentos.

Em certos casos, no entanto, funções simples de seta podem ser declaradas usando construções muito mais compactas.

Considere a sintaxe usada se o corpo da função for representado por uma única expressão. Ele permite que você fique sem colchetes que enquadram o corpo da função e elimina a necessidade de retornar explicitamente os resultados da avaliação de uma expressão, pois esse resultado será retornado automaticamente. Por exemplo, pode ser assim:

 const add = (a, b) => a + b; 

Aqui está outra variante da notação abreviada da função, usada quando a função possui apenas um argumento.

 const getFirst = array => array[0]; 

Como você pode ver, os parênteses que cercam a lista de argumentos são omitidos aqui. Além disso, o corpo da função, que neste exemplo é representado por um único comando, também é gravado sem colchetes. Mais tarde, falaremos mais sobre os benefícios de tais projetos.

Objetos de retorno e funções de seta de registro curto

Ao trabalhar com funções de seta, também são usadas algumas construções de sintaxe mais complexas, úteis para conhecer.

Por exemplo, tente usar uma expressão de linha única para retornar de uma função literal do objeto. Pode parecer, dado o que já sabemos sobre as funções de seta, que uma declaração de função será semelhante a esta:

 (name, description) => {name: name, description: description}; 

O problema com este código é sua ambiguidade. Ou seja, as chaves que queremos usar para descrever o objeto literal parecem estar tentando incluir o corpo de uma função nelas.

Para indicar ao sistema que queremos dizer o objeto literal, precisamos incluí-lo entre parênteses:

 (name, description) => ({name: name, description: description}); 

▍ Funções de seta e seu contexto de execução

Diferentemente de outras funções, as funções de seta não têm seu próprio contexto de execução .

Na prática, isso significa que eles herdam as entidades this e arguments da função pai.

Por exemplo, compare as duas funções apresentadas no código a seguir. Um deles é comum, o segundo é flecha.

 const test = { name: 'test object', createAnonFunction: function() {   return function() {     console.log(this.name);     console.log(arguments);   }; }, createArrowFunction: function() {   return () => {     console.log(this.name);     console.log(arguments);   }; } }; 

Há um objeto de test com dois métodos. Cada um deles é uma função que cria e retorna uma função anônima. A diferença entre esses métodos é apenas que, no primeiro deles, a expressão funcional tradicional é usada e na função da segunda seta.

Se experimentarmos esse código no console, passando os mesmos argumentos para os métodos do objeto, embora os métodos pareçam muito semelhantes, obteremos resultados diferentes:

 > const anon = test.createAnonFunction('hello', 'world'); > const arrow = test.createArrowFunction('hello', 'world'); > anon(); undefined {} > arrow(); test object { '0': 'hello', '1': 'world' } 

Uma função anônima tem seu próprio contexto, portanto, quando for chamada, quando você chamar test.name , o valor da propriedade name do objeto não será test.name e, quando você chamar arguments , a lista de argumentos da função usada para criar e retornar a função sob investigação não será exibida.

No caso de uma função de seta, verifica-se que seu contexto coincide com o contexto da função que a criou, o que lhe dá acesso tanto à lista de argumentos transmitidos por essa função quanto à propriedade de name do objeto cujo método é essa função.

Situações em que as funções de seta aprimoram o código

Processando listas de valores

Funções lambda tradicionais, bem como funções de seta, depois que aparecem em JavaScript, geralmente são usadas em situações em que uma determinada função é aplicada a cada elemento de uma determinada lista.

Por exemplo, se houver uma matriz de valores que precise ser convertida usando o método matrizes de map , uma função de seta é ideal para descrever essa conversão:

 const words = ['hello', 'WORLD', 'Whatever']; const downcasedWords = words.map(word => word.toLowerCase()); 

Aqui está um exemplo extremamente comum do uso semelhante de funções de seta, que consiste em trabalhar com as propriedades dos objetos:

 const names = objects.map(object => object.name); 

Da mesma forma, se em vez de tradicionais for loops, eles usam modernos loops forEach baseados em forEach , as funções de seta usam this entidade pai, tornam seu uso intuitivo:

 this.examples.forEach(example => { this.runExample(example); }); 

▍ Promessas e cadeias de promessas

Outra situação em que as funções de seta permitem escrever códigos mais limpos e compreensíveis é representada por construções de software assíncronas.

Portanto, as promessas simplificam bastante o trabalho com código assíncrono. Ao mesmo tempo, mesmo se você preferir usar a construção assíncrona / aguardada , você não pode prescindir das promessas , pois essa construção é baseada nelas.

No entanto, ao usar promessas, você precisa declarar funções chamadas após a conclusão do código assíncrono ou a conclusão da chamada assíncrona para uma determinada API.

Este é o local ideal para usar as funções de seta, especialmente se a função resultante tiver um determinado estado, se referir a algo no objeto. Por exemplo, pode ser assim:

 this.doSomethingAsync().then((result) => { this.storeResult(result); }); 

▍ Transformação de Objetos

Outro caso de uso comum para funções de seta é encapsular transformações de objeto.

Por exemplo, no Vue.js, existe um padrão comum para incluir fragmentos de armazenamento do Vuex diretamente em um componente do Vue usando o mapState .

Esta operação inclui declarações de um conjunto de "conversores" que selecionam exatamente o que é necessário para um componente específico a partir do estado completo inicial.

Essas transformações simples são o lugar perfeito para usar as funções de seta. Por exemplo:

 export default { computed: {   ...mapState({     results: state => state.results,     users: state => state.users,   }); } } 

Situações em que as funções de seta não devem ser usadas

▍ Métodos de objeto

Existem várias situações em que o uso das funções de seta não é uma boa ideia. As funções de seta, se usadas de ânimo leve, não apenas não ajudam os programadores, mas também se tornam uma fonte de problemas.

A primeira situação é usar funções de seta como métodos de objeto. O contexto de execução e a this , específicos para funções tradicionais, são importantes aqui.

Ao mesmo tempo, era popular usar uma combinação de propriedades de classe e funções de seta para criar métodos com "ligação automática", ou seja, aqueles que podem ser usados ​​por manipuladores de eventos, mas permanecem vinculados à classe. Parecia algo assim:

 class Counter { counter = 0; handleClick = () => {   this.counter++; } } 

Usando uma construção semelhante, mesmo que a função handleClick chamada pelo manipulador de eventos e não no contexto de uma instância da classe Counter , essa função teve acesso aos dados dessa instância.

No entanto, essa abordagem tem muitos pontos negativos aos quais esse material é dedicado.

Embora o uso de uma função de seta aqui, é claro, seja uma maneira conveniente de vincular uma função, o comportamento dessa função em muitos aspectos está longe de ser intuitivo, interferindo no teste e criando problemas em situações em que, por exemplo, eles tentam usar o objeto correspondente como um protótipo.

Nesses casos, em vez de funções de seta, use funções comuns e, se necessário, vincule a elas uma instância do objeto no construtor:

 class Counter { counter = 0; handleClick() {   this.counter++; } constructor() {   this.handleClick = this.handleClick.bind(this); } } 

ChainsLonga cadeia de chamadas

As funções de seta podem se tornar uma fonte de problemas se forem planejadas para serem usadas em muitas combinações diferentes, em particular, em longas cadeias de chamadas de função.

A principal razão para esses problemas, como ao usar funções anônimas, é que eles fornecem resultados extremamente pouco informativos do rastreamento da pilha de chamadas .

Isso não é tão ruim se, por exemplo, houver apenas um nível de aninhamento de chamadas de função, por exemplo, se estivermos falando sobre a função usada no iterador. No entanto, se todas as funções usadas forem declaradas como seta, e essas funções se chamarem, se ocorrer um erro, não será fácil descobrir o que está acontecendo. As mensagens de erro terão a seguinte aparência:

 {anonymous}() {anonymous}() {anonymous}() {anonymous}() {anonymous}() 

With Funções com contexto dinâmico

A última das situações em que estamos discutindo, nas quais as funções de seta podem se tornar uma fonte de problemas, é usá-las onde você precisa de uma ligação dinâmica.

Se funções de seta forem usadas nessas situações, a dinâmica this ligação não funcionará. Essa surpresa desagradável pode levar a que se confundam as razões do que acontece com aqueles que precisam trabalhar com código no qual as funções das setas são usadas incorretamente.

Aqui estão algumas coisas a serem lembradas ao considerar o uso das funções de seta:

• Manipuladores de eventos são chamados com this associado ao atributo de evento currentTarget .
• Se você ainda estiver usando jQuery, considere que a maioria dos métodos jQuery vincula this ao elemento DOM selecionado.
• Se você usa o Vue.js, métodos e funções calculadas geralmente o vinculam ao componente Vue.

Obviamente, as funções de seta podem ser usadas intencionalmente para alterar o comportamento padrão dos mecanismos de software. Mas, especialmente nos casos com jQuery e Vue, isso geralmente entra em conflito com o funcionamento normal do sistema, o que leva ao fato de que o programador não consegue entender por que algum código que parece completamente normal se recusa a trabalhar repentinamente.

Sumário

As funções de seta são um recurso JavaScript maravilhoso e fresco. Eles permitem, em muitas situações, escrever código mais conveniente do que antes. Mas, como é o caso de outros recursos, eles têm vantagens e desvantagens. Portanto, você precisa usar as funções de seta onde elas podem ser úteis, sem considerá-las como um substituto completo para funções comuns.

Caros leitores! Você encontrou situações nas quais o uso das funções de seta leva a erros, inconvenientes ou comportamento inesperado dos programas?