Funções de seta vs. Funções regulares em JavaScript

Como quase todas as linguagens de programação modernas, o JavaScript oferece maneiras de criar funções para permitir a reutilização do código. Para quem não está familiarizado com a linguagem, existem duas formas diferentes de declarar uma função em JavaScript.

Originalmente, o função palavra-chave foi usada e, posteriormente, a sintaxe da seta foi criada. Embora difiram na acessibilidade do escopo, tanto a palavra-chave da função quanto a sintaxe da seta criam resultados semelhantes.

A incapacidade de distinguir entre os dois pode causar problemas e levar ao uso incorreto. É uma necessidade para o desenvolvedor JS moderno entender como cada declaração de função afeta o escopo e a visibilidade.

Quais são as funções de seta do JavaScript?

Funções de seta do JavaScript são uma maneira alternativa de definir funções que não usam o padrão função palavra-chave:

funçãologMessage(mensagem) {
console.log (mensagem);
}
const logMensagem = (mensagem) => {
console.log (mensagem);
}
const logMensagem = mensagem =>console.log (mensagem);

Acima, você pode ver a mesma mensagem escrita de três maneiras diferentes. O primeiro usa o método de declaração de função regular. Os próximos dois mostram as duas maneiras de usar as funções de seta do ES6.

O JavaScript adotou pela primeira vez a sintaxe da função de seta com o lançamento dos padrões ECMAScript 2015. As funções de seta ofereciam uma maneira limpa e concisa de criar funções rapidamente e uma solução interessante para vários problemas de escopo de execução longa no JavaScript.

Esses recursos rapidamente tornaram as funções de seta um sucesso entre muitos desenvolvedores. Os programadores que procuram uma base de código JavaScript moderna têm a mesma probabilidade de encontrar funções de seta como funções regulares.

Como as funções de seta são diferentes das funções regulares em JavaScript?

À primeira vista, as funções de seta não parecem diferir muito das funções declaradas usando a palavra-chave function. Fora da sintaxe, ambos encapsulam um conjunto reutilizável de ações que podem ser chamadas de qualquer outra parte do código.

Apesar das semelhanças entre os dois, no entanto, existem algumas diferenças que os desenvolvedores precisam estar cientes.

Diferença no escopo

Sempre que uma função regular é declarada em JavaScript, essa função funciona como um encerramento que cria seu próprio escopo. Isso pode causar um problema ao usar certas funções especializadas, como setTimeout e setInterval.

Antes do ES6, havia um número significativo de soluções alternativas que elevavam os itens a níveis mais altos de escopo para uso em retornos de chamada. Esses hacks funcionavam, mas geralmente eram difíceis de entender e podiam causar problemas com a substituição de certas variáveis.

As funções de seta resolveram ambos os problemas de maneira simples e elegante. Quando uma função de seta é usada como parte de um retorno de chamada, ela tem acesso ao mesmo escopo da função da qual foi chamada.

Isso permitiu que as funções fossem usadas como retornos de chamada sem perder o acesso ao contexto no qual o evento original foi chamado. Como um teste simples para mostrar esse princípio em ação, você pode configurar uma função de mensagens atrasadas como a abaixo:

funçãomensagem atrasada(mensagem, atraso) {

 setTimeout(função(mensagem) {
console.log (mensagem);
 }, atraso);
}
mensagem atrasada("Olá Mundo", 1000);

A função é simples, aceitando mensagem e atraso em milissegundos. Depois que o atraso é passado, ele deve registrar a mensagem no console. No entanto, quando o código é executado, indefinido será registrado no console em vez da mensagem que foi passada.

Quando a função callback é executada, o escopo muda e a mensagem original não fica mais acessível. Usar a mensagem de dentro do encerramento requer que a mensagem seja elevada a uma variável global, o que pode resultar em sua substituição antes do retorno de chamada.

Uma função de seta é uma correção adequada para esse problema. Se você substituir o primeiro argumento por setTimeout, o escopo pode ser mantido e a função terá acesso à mensagem passada para mensagem atrasada.

funçãomensagem atrasada(mensagem, atraso) {

 setTimeout(() => {
console.log (mensagem);
 }, atraso);
}
mensagem atrasada("Olá Mundo", 1000);

Agora, quando executado, o mensagem atrasada A função registrará a mensagem. Além disso, isso permite que várias mensagens sejam enfileiradas com diferentes atrasos e todas elas ainda ocorrerão no horário correto.

Isso se deve ao fato de que cada vez mensagem atrasada for usado, ele gera seu próprio escopo com sua própria cópia da função de seta interna.

Legibilidade do código

Embora as funções de seta sejam úteis como retornos de chamada, elas também são usadas para manter o código limpo e conciso. Na seção acima, você pode ver que usar uma função de seta torna imediatamente óbvio o que acontecerá quando o mensagem atrasada função é chamada.

À medida que as funções se tornam mais complexas, ter um pouco de clareza pode tornar o código muito mais legível. Ao compor objetos, isso pode simplificar o código ao adicionar funções curtas:

aulacontador{
 _contagem = 0;
 incremento = () => {
esse._contagem += 1;
 }
 decremento = () => {
esse._contagem -= 1;
 }
 contagem = () => {
retornaresse._contar;
 }
}
deixar ct = novo contador();

Função na Programação Orientada a Objetos

Embora as funções de seta do JavaScript sejam parte integrante da programação funcional, elas também têm um lugar em programação orientada a objetos. As funções de seta podem ser usadas nas declarações de classe:

aulapedidoLineItem{
 _LineItemID = 0;
 _Produto = {};
 _Quantidade = 1;
construtor(produtos) {
esse._LineItemID = crypto.randomUUID();
esse._Produto = produto
 }
 changeLineItemQuantity = (Qtd novo) => {
esse._Quantidade = novaQuantidade;
 }
}

Usar uma função de seta para declarar métodos dentro de uma declaração de classe não altera o comportamento da função dentro da classe. Fora da classe, no entanto, ele expõe a função, permitindo que ela seja usada por outras classes.

Funções regulares não podem ser acessadas fora da declaração de classe sem serem chamadas. Isso significa que enquanto outras declarações de classe podem herdar essas funções, elas não podem ser acessadas diretamente para compor outras classes.

Quando você deve usar as funções de seta do JavaScript?

As funções de seta do JavaScript são um recurso incrivelmente poderoso que oferece aos desenvolvedores muito mais controle sobre o escopo ao qual uma função tem acesso. Saber quando um retorno de chamada deve ter acesso ao escopo de seu pai e quando não deve pode ajudar um desenvolvedor a determinar qual tipo de declaração usar.

As funções de seta fornecem aos programadores uma maneira clara e concisa de escrever retornos de chamada sem expor partes do escopo que devem ser ocultadas. Eles também permitem a criação de composições limpas e simples, possibilitando ainda mais a programação funcional em JavaScript.

Os desenvolvedores JS devem estar cientes das diferenças entre as duas sintaxes e estar atentos a qual sintaxe é apropriada ao declarar suas funções.