Por que você deve ter cuidado ao usar funções de seta em JavaScript

A sintaxe da função de seta chegou com o lançamento do ECMAScript 2015, também conhecido como ES6. Hoje, as funções de seta se tornaram o recurso favorito de muitos programadores de JavaScript. Esse amor pelas funções de seta se deve à sintaxe concisa e ao comportamento direto da palavra-chave "this".

Mas as funções de seta têm algumas desvantagens. Aprenda sobre as principais diferenças entre as funções de seta e as funções regulares e descubra por que, na maioria dos casos, é melhor ficar com as funções regulares.

1. Você deve definir uma função de seta antes de usá-la

Você não pode içar uma função de seta. Regras de elevação padrão do JavaScript permitem que você chame uma função antes de defini-la, mas esse não é o caso das funções de seta. Se você tiver um arquivo JavaScript com funções, isso significa que todo o código importante estará no final do arquivo.

Considere o seguinte código JavaScript, por exemplo:

const doubleNumbers = (números) { 
 números.mapa(n => n * 2)
}
const metadeNúmeros = (números) { 
 números.mapa(n => n/ 2)
}
const somaNumeros = (números) { 
 números.reduzir((soma, n) => { 
retornar soma + n; 
 }, 0)
}
const números = [1, 20, 300, 700, 1500]
const doubled = doubleNumbers (números)
console.log (halveNumbers (dobrada))
console.log (sumNumbers (números))

No bloco de código acima, o código importante está na parte inferior. As funções auxiliares são todas definidas antes do ponto de execução. Ter de crie suas funções JavaScript na parte superior do arquivo pode ser inconveniente porque você terá que rolar para baixo para ver o código real que faz o trabalho.

Se você moveu as funções auxiliares para a parte inferior e o código real para a parte superior, obterá um erro de referência. O tempo de execução trata a função como uma variável. Portanto, você deve defini-lo antes de acessá-lo ou invocá-lo. Mas se você converteu todas as funções de seta em funções regulares (com o função palavra-chave), então seu código funcionaria bem. Ao mesmo tempo, o código importante fica no topo, onde você pode localizá-lo.

Este é um dos maiores problemas com o uso de funções de seta. Eles não exibem nenhum comportamento de hospedagem. Em outras palavras, você deve defini-los antes do local real em que os usaria. Por outro lado, você pode içar funções regulares.

2. Funções de seta podem ser confusas para algumas pessoas

Outro motivo para usar funções regulares em vez de funções de seta é a legibilidade. As funções regulares são mais fáceis de ler porque usam explicitamente o função palavra-chave. Esta palavra-chave identifica que o código em questão é uma função.

Por outro lado, você atribui funções de seta a variáveis. Como um novato, isso pode confundi-lo e fazê-lo pensar que o código é uma variável, em vez de uma função.

Compare as duas funções abaixo:

const metadeNúmeros = (números) => {
retornar números.mapa(n => n/ 2)
}
funçãometade dos números(números) { 
retornar números.mapa(n => n/ 2)
}

À primeira vista, você pode dizer facilmente que o segundo pedaço de código é uma função. A sintaxe deixa claro que o código é uma função. No entanto, o primeiro é ambíguo - você pode não saber facilmente se é uma variável ou uma função.

3. Você não pode usar funções de seta como métodos

Quando você usa uma função de seta, o esse palavra-chave corresponde a tudo o que está fora da coisa que estamos dentro. Na maioria dos casos, é o objeto janela.

Considere o seguinte objeto:

const pessoa = {
 primeiro nome: "Kyle",
 sobrenome: "Cozinhar",
 imprimirNome: () => {
console.registro(`${esse.primeiro nome}``${esse.sobrenome}` )
 }
}
pessoa.printName()

Se você executar o código, notará que o navegador imprime indefinido tanto para o primeiro nome quanto para o sobrenome. Como estamos usando uma função de seta, esse palavra-chave corresponde ao objeto janela. Também não há primeiro nome ou sobrenome propriedade definida lá.

Para resolver esse problema, você precisa usar uma função regular:

const pessoa = {
 primeiro nome: "Kyle",
 sobrenome: "Cozinhar",
 imprimirNome: função() {
console.registro(`${esse.primeiro nome}``${esse.sobrenome}` )
 }
}
pessoa.printName()

Isso vai funcionar bem porque esse refere-se a pessoa objeto. Se você estiver fazendo muito esse tipo de programação orientada a objetos, precisará certificar-se de que está usando funções regulares. As funções de seta não funcionarão.

Quando usar as funções de seta

Use funções de seta principalmente em locais onde você precisa de uma função anônima. Um exemplo desse cenário é lidar com uma função de retorno de chamada. É melhor usar uma função de seta ao escrever um retorno de chamada porque a sintaxe é muito mais simples do que escrever uma função completa.

Compare estes dois e decida qual é mais simples:

funçãometade dos números(números) {
retornar números.mapa(n => n/ 2)
}
funçãometade dos números(números) {
retornar números.mapa(função(n) {
retornar n/ 2
 })
}

Ambos os casos passam uma função de callback para o método map(). Mas o primeiro retorno de chamada é uma função de seta, enquanto o segundo é uma função completa. Você pode ver como a primeira função ocupa menos linhas de código do que a segunda função: três vs. cinco.

A outra ocasião para usar funções de seta é sempre que você quiser lidar com uma sintaxe "this" específica. O objeto "this" mudará dependendo se você estiver usando funções regulares ou funções de seta para coisas específicas.

O bloco de código a seguir registra dois ouvintes de evento "clique" no objeto de documento. A primeira instância usa uma função regular como retorno de chamada, enquanto a segunda usa uma função de seta. Dentro de ambos os retornos de chamada, o código registra o objeto de execução (this) e o destino do evento:

documento.addEventListener("clique", função(e) {
console.registro("FUNÇÃO", esse, e.target)
})
documento.addEventListener("clique", (e) => {
console.registro("SETA", esse, e.target)
})

Se você fosse executar este script, notaria que a referência "this" é diferente para ambos. Para a função regular, esta propriedade faz referência ao documento, que é o mesmo que o e.target propriedade. Mas para a função de seta, isso faz referência ao objeto janela.

Quando você usa uma função regular como retorno de chamada, isso se referirá ao elemento em que acionamos o evento. Mas quando você usa uma função de seta, essa palavra-chave é padronizada para o objeto janela.

Saiba mais sobre funções de seta versus funções regulares

Existem várias outras diferenças sutis entre funções regulares e funções de seta. Dominar os dois tipos de função é fundamental para dominar o JavaScript. Aprenda quando usar um e quando usar o outro; você entenderá as implicações de usar uma função regular ou uma função de seta em seu JavaScript.