Funções de Seta em Javascript

Funções de Seta – também chamadas funções de “seta gorda”, são relativamente uma nova forma de escrever funções concisas em JavaScript. Elas foram introduzidas pelas especificações do ECMAScript 6 e desde então se tornaram a característica mais popular do ES6. As funções de setas permitem-nos utilizar a seta gorda => operador para definir rapidamente funções JavaScript, com ou sem parâmetros. Somos capazes de omitir os suportes encaracolados e a função e retornar palavras-chave ao criar uma nova função JavaScript para escrever uma sintaxe de função mais curta. Eles não são apenas economizadores de tempo, mas também produzem funções limpas e mais legíveis.

Neste artigo, vamos dar uma olhada em alguns cenários do mundo real para criar funções de seta – usando a notação ES6 versus ECMAScript 5 antiga para que possamos ver como as duas sintaxes se comparam entre si.

A sintaxe mais simples da função de seta é quando a função não tem nenhum parâmetro. No exemplo abaixo, a sintaxe do ECMAScript 5 declara uma expressão de função e a atribui à variável aniversário. Ele produz uma simples string de texto para o console, dizendo “Parabéns!”:

Na sintaxe da função seta, os parênteses curvos e as palavras-chave função e retorno desaparecem. Agora, a função inteira leva apenas uma linha. Os parênteses vazios indicam que a função não tem nenhum parâmetro e a seta de gordura liga o corpo da função aos parâmetros (atualmente inexistentes):

Um Parâmetro

Vamos ampliar o exemplo anterior com um parâmetro, especificamente o nome. A antiga sintaxe do ES5 assume um parâmetro e anexa seu valor à string a ser retornada:

>

>

A sintaxe da função seta faz essencialmente a mesma coisa. Precisamos colocar o parâmetro do nome dentro dos parênteses antes da seta de gordura e omitir a palavra-chave return no bloco de funções:

>

>

>>

>

Dois parâmetros

>

Podemos usar as funções de seta com quantos parâmetros quisermos. Por exemplo, aqui está o mesmo exemplo com dois parâmetros, idade e nome. Agora, a função birthday() requer duas entradas para retornar a string. Primeiro, vamos usar ECMAScript 5:

E, aqui está o mesmo código com a nova notação ES6:

>

>

Literais de Objetos

Também podemos usar a sintaxe da função seta para declarar funções setter que permitem aos usuários definir o valor dos objetos literais. A função setBirthday() abaixo permite ao usuário definir o nome e a idade da pessoa que faz aniversário:

Ao fazer uso da notação da função setter, basta uma linha para definir a mesma função setter:

>

>

Manipulação de setters

Podemos usar as funções de seta para manipular arrays JavaScript também. Por exemplo, vamos dar uma olhada no array de pessoas que inclui três objetos literais, cada um com um nome e uma propriedade de idade:

O método de mapa embutido() do JavaScript nos permite chamar a mesma função em cada elemento da matriz. Usando a notação tradicional ES5, podemos retornar a propriedade do nome de cada pessoa da seguinte forma:

Com a notação da função seta, podemos executar a mesma tarefa em uma linha:

>

>

>

Quando não usar as funções de seta

>

As funções de seta têm muitos casos de uso, mas vêm com algumas limitações também. Existem alguns cenários em que não podemos ou não devemos usar a sintaxe das funções de seta.

Mais importante, não podemos criar construtores com funções de seta. Se usarmos a nova palavra-chave juntamente com a sintaxe da seta gorda, o console irá lançar um erro. Isto acontece porque o JavaScript trata as funções das setas da mesma forma que os métodos dos objetos. Como resultado, eles não podem ter seus próprios métodos, o que seria uma característica essencial dos objetos JavaScript. Além disso, não podemos usar a sintaxe ES6 para declarar literalmente os objetos e funções de retorno contendo métodos que fazem uso dessa palavra-chave, já que as funções de seta tratam isso de uma maneira diferente.

Conclusion

Arrow functions fornecem aos desenvolvedores uma abreviação útil para escrever expressões de funções em JavaScript. A sintaxe da seta gorda tem muitos casos de uso, por isso tornou-se rapidamente a característica favorita do ES6 da comunidade JavaScript. Se usada consistentemente, a nova notação compacta pode poupar muito tempo e largura de banda, e melhorar a legibilidade do código.

Obrigado pela leitura.