Usando funções de seta em JavaScript

Uma função de seta em JavaScript é uma alternativa mais rápida a uma função tradicional. A sintaxe permite a criação rápida de funções anônimas embutidas.

As funções de seta foram adicionadas ao ES6 em 2015. Agora, elas são suportadas por todos os principais navegadores. Você pode usá-los com navegadores mais antigos, como o Internet Explorer, por meio de um transpiler como o Babel.

Criação de funções de seta

A principal vantagem das funções de seta é como elas tornam seu código conciso.

Aqui &’ é uma função tradicional:

quadrado de função & # 40; x & # 41; & # 123; return & # 40; x * x & # 41 ;; & # 125;

Este é o mesmo código reescrito como uma função de seta:

const square = x = > & # 40; x * x & # 41 ;;

Elas são chamadas de “ funções de seta ” por causa do tipo seta “ = > ” sintaxe.

As funções de seta são particularmente úteis ao trabalhar com retornos de chamada.

Aqui está a versão tradicional:

function getNonEmptyStrings & # 40; arr & # 41; & # 123; return arr. filter & # 40; function & # 40; i & # 41; & # 123; return & # 40; i. length > 0 & # 41 ;; & # 125; & # 41 ;; & # 125;

E aqui está a função interna como uma função de seta:

function getNonEmptyStrings & # 40; arr & # 41; & # 123; return arr. filter & # 40; i = > & # 40; i. length > 0 & # 41; & # 41 ;; & # 125;

As funções de seta são muito mais curtas do que suas contrapartes tradicionais. Você pode omitir o prefixo da função. Eles permitem instruções limpas de uma linha e têm uma instrução de retorno implícita.

Manipulação de argumentos

As funções de seta aceitam algumas formas diferentes de argumentos:

const noArgs = & # 40; & # 41; = > alerta & # 40; " Não tenho argumentos " & # 41 ;;   const oneArg = arg = > alert & # 40; `Meu argumento é $ & # 123; arg & # 125;` & # 41 ;;   const multipleArgs = & # 40; arg1, arg2 & # 41; = > alerta & # 40; `Args: $ & # 123; arg1 & # 125; $ & # 123; arg2 & # 125; `& # 41 ;;

Ao usar um único argumento, não são necessários parênteses. Quando houver vários argumentos, use parênteses e vírgulas no mesmo estilo de uma declaração de função clássica. As funções de seta que não aceitam argumentos requerem um par vazio de parênteses, portanto a sintaxe é válida.

Trabalhando com literais de objetos

Você pode retornar literais de objeto de funções de seta embutidas, mas eles devem ser colocados entre parênteses. Este é um requisito do analisador.

const func = & # 40; & # 41; = > & # 40; & # 123; foo: " bar " & # 125; & # 41 ;;

Você pode desestruturar um literal de objeto em argumentos usando a mesma forma delimitada por parênteses:

const func = & # 40; & # 123; foo & # 125; & # 41; = > foo; // func () retorna " bar "

A omissão dos parênteses cria um erro de sintaxe em ambos os casos.

Valores de retorno

Todos os nossos exemplos até agora foram funções de linha única com uma instrução de retorno implícita.

Você pode escrever funções de seta que abrangem várias linhas:

function getNonEmptyStrings & # 40; arr & # 41; & # 123; return arr. filter & # 40; i = > & # 123; const trimmed = i. trim & # 40; & # 41 ;; const replace = trimmed. replace & # 40; / [^ A-Za-z] / g, " " & # 41 ;; return & # 40; replace. length > 0 & # 41 ;; & # 125; & # 41 ;; & # 125;

Ao escrever uma função de seta de várias linhas, envolva seu bloco de corpo entre colchetes da mesma forma que faria com uma função tradicional. Não é possível usar um retorno implícito; você deve reverter para uma declaração de retorno.

Ligação lexical

Além da sintaxe, a presença de ligação lexical é uma das maiores diferenças entre as funções de seta e as expressões de função clássicas.

Uma função tradicional tem esse limite para se referir a si mesma. As funções das setas são sempre anônimas. está associado ao mesmo valor que this dentro do bloco que define a função da seta.

classe Exemplo & # 123;   construtor & # 40; & # 41; & # 123; this. demo = " foobar & quot ;; & # 125;   clássico & # 40; arr & # 41; & # 123; return arr. filter & # 40; function & # 40; a & # 41; & # 123; return & # 40; a === this. demo & # 41 ;; & # 125; & # 41 ;; & # 125;   arrow & # 40; arr & # 41; & # 123; return arr. filter & # 40; a = > & # 40; a === this. demo & # 41; & # 41 ;; & # 125;   & # 125;   const ex = new Exemplo & # 40; & # 41 ;;   // sem correspondência ex. classic & # 40; & # 91; " foobar " & # 93; & # 41 ;;   // corresponde a ex. arrow & # 40; & # 91; " foobar " & # 93; & # 41 ;;

A capacidade das funções de seta de usar o this do escopo pai significa que você não precisa usar bind () ao usá-los nas aulas. Combinado com a sintaxe terser, isso torna as funções de seta a forma ideal ao escrever callbacks. Eles são melhores em cenários descartáveis, onde o contexto externo é mais importante do que a própria identidade da função.

Como consequência da vinculação lexical, as funções de seta não devem ser usadas com as funções de chamada, aplicação e vinculação. Essas funções são usadas para executar uma função dentro de um escopo específico. Eles não são relevantes para as funções de seta, pois isso sempre será definido para o escopo em que a expressão é definida.

Características

As funções de seta têm algumas outras diferenças em comparação com expressões de função definidas explicitamente.

As funções de seta não têm construtor, portanto você pode &’ criar instâncias delas com a nova palavra-chave. Eles &’ não têm protótipo – a propriedade do protótipo será indefinida.

Ao contrário das funções regulares, você pode &’ usar a variável local de argumentos. Será indefinido. Você deve acessar os valores dos argumentos diretamente pelo nome.

O uso de uma função de seta como gerador não é suportado. Tentar usar a palavra-chave de rendimento no corpo de uma função de seta gerará um erro.

Uma última coisa a observar é a ordem de análise. As funções de seta recebem tratamento exclusivo dentro de expressões condicionais, portanto, observe a saída nos seguintes cenários:

valor const = falso;   // Função tradicional; tudo OK let result = & # 40; value || function & # 40; & # 41; & # 123; & # 125; & # 41 ;;   // Função de seta - lança um `SyntaxError` let result = & # 40; value || & # 40; & # 41; = > null & # 41 ;;   // Função de seta; tudo OK let result = & # 40; value || & # 40; & # 40; & # 41; = > null & # 41; & # 41 ;;

Ao criar uma função de seta em uma expressão condicional, coloque-a entre parênteses para garantir que ela seja avaliada corretamente. Algumas das regras de precedência do operador são substituídas, conforme ilustrado pelo segundo exemplo.

Conclusão

O uso de funções de seta torna seu código mais conciso e reduz o boilerplate. Seus atributos, incluindo anonimato e vinculação lexical, simplificam consideravelmente cenários como retornos de chamada. Simultaneamente, esses mesmos atributos significam que eles não são uma substituição imediata para todas as funções tradicionais.

Além de suas limitações, alguns desenvolvedores de JavaScript consideram que as funções de seta podem tornar o código menos legível e mais difícil de manter. A completa falta de palavras-chave, como função e retorno, torna possível ignorar sua presença enquanto escuma o código. A sintaxe é mais opaca para novos desenvolvedores que podem não estar totalmente cientes de suas idiossincrasias.

Portanto, é uma boa ideia pensar em como você usará as funções de seta em sua base de código. Freqüentemente, isso significa escrever retornos de chamada em forma de seta, mantendo a sintaxe alternativa para as principais funções de nível superior.