As funções de seta do JavaScript são bastante populares. E eles merecem, diferindo na sintaxe lacônica, na ligação lexical thise no fato de serem muito convenientes para usar como retornos de chamada. O material, cuja tradução publicamos hoje, inclui 5 recomendações sobre o uso das funções de seta. Quem tira proveito dessas recomendações tem a chance de revelar mais plenamente o potencial de tais funções.
1. Use a exibição dos nomes das funções das setas
As funções de seta do JavaScript são anônimas: sua propriedade namecontém uma string vazia - ''.( number => number + 1 ).name;
Funções anônimas são marcadas como anonymousdurante a depuração ou ao analisar a pilha de chamadas. Infelizmente, a palavra anonymousnão contém uma dica sobre qual código específico está relacionado.Aqui está um dos pontos no código de depuração onde funções anônimas são chamadas.Código de depuração contendo funções anônimasA pilha de chamadas no lado direito da figura contém referências a 2 funções marcadas comoanonymous. Com essas informações contidas na pilha de chamadas, não se pode aprender nada útil sobre o código.Felizmente, o JavaScript possui um mecanismo para derivar nomes de funções (recurso ES2015), que é capaz, sob certas condições, de detectar um nome de função. A idéia de exibir o nome é que o JavaScript possa descobrir o nome da função de seta a partir de sua posição sintática, ou seja, com base no nome da variável que armazena o link no objeto de função.Vejamos o mecanismo para derivar nomes de funções em ação:const increaseNumber = number => number + 1;
increaseNumber.name;
Como a referência à função de seta é armazenada em uma variável increaseNumber, o JavaScript decide que o nome é 'increaseNumber'adequado para a função. Como resultado, a função de seta também recebe esse nome.É recomendável usar o mecanismo de derivação do nome da função para nomear funções de seta.Agora, vejamos o processo de depuração, durante o qual o mecanismo para derivar nomes de funções é usado.Código de depuração contendo funções de seta que recebem nomesComo as funções de seta agora têm nomes, a pilha de chamadas fornece informações mais úteis sobre o código que está sendo executado:- O nome da função
handleButtonClickindica uma chamada para o manipulador de eventos click. - O nome
increaseCounterindica uma chamada para a função que incrementa o contador.
2. Sempre que possível, esforce-se para escrever funções em linha
Uma função "inline" é uma função que consiste em uma única expressão. Nas funções de seta, gosto do fato de serem muito convenientes para criar funções curtas em linha.Por exemplo, aqui está a forma "completa" de uma função de seta:const array = [1, 2, 3];
array.map((number) => {
return number * 2;
});
Esse recurso pode ser facilmente mais compacto. Ou seja, como a função contém apenas uma expressão, você pode remover chaves e return:const array = [1, 2, 3];
array.map(number => number * 2);
É recomendável que, se uma função contiver apenas uma expressão, faça-a em linha.3. Use com cuidado as funções de seta e operadores de comparação.
Os operadores de comparação >, <, <=e >=são muito semelhantes aos da seta =>, através da qual declarar seta funções (tais setas também é chamado de "uma seta negrito").Quando operadores de comparação são usados em uma função embutida, o código resultante pode não estar muito claro.Declare uma função de seta que usa o operador <=:const negativeToZero = number => number <= 0 ? 0 : number;
A presença em uma linha de caracteres =>e <=desorienta o leitor de código.Para distinguir claramente as setas dos operadores de comparação, várias abordagens podem ser usadas.Primeiro, você pode colocar a expressão entre parênteses:const negativeToZero = number => (number <= 0 ? 0 : number);
Em segundo lugar, você pode declarar intencionalmente uma função de seta usando uma construção mais longa:const negativeToZero = number => {
return number <= 0 ? 0 : number;
};
Essas transformações removem a incerteza causada pelo uso do símbolo de seta e dos operadores de comparação em uma linha.Recomenda-se que se a função de uma linha Uma seta contém declarações >, <, <=e >=, para concluir a expressão correspondente em parênteses ou usar um multi-forma anúncios arrow funções.4. Use parênteses ou estruturas de várias linhas ao criar objetos simples nas funções de seta
O uso de um literal de objeto dentro de uma função de seta incorporada resultará em um erro de sintaxe:const array = [1, 2, 3];
array.map(number => { 'number': number });
O JavaScript considera que chaves são um bloco de código, não um objeto literal.Se você colocar o objeto literal entre parênteses, esse problema será resolvido:const array = [1, 2, 3];
array.map(number => ({ 'number': number }));
Se um literal de objeto tem muitas propriedades, então aqui você pode até usar feeds de linha. A função de seta ainda permanece incorporada:const array = [1, 2, 3];
array.map(number => ({
'number': number
'propA': 'value A',
'propB': 'value B'
}));
Literais de objeto, quando usados em funções embutidas, são recomendados entre parênteses.5. Tenha cuidado para aninhar-se profundamente.
As funções das setas diferem na sintaxe lacônica. É bom. Porém, por causa disso, muitas funções de seta incorporadas umas às outras podem formar estruturas de difícil leitura.Considere o seguinte cenário. Quando eles clicam no botão, uma solicitação para o servidor é executada. Quando uma resposta do servidor que contém um conjunto de determinados elementos é recebida, os nomes desses elementos são exibidos no console:myButton.addEventListener('click', () => {
fetch('/items.json')
.then(response => response.json())
.then(json => {
json.forEach(item => {
console.log(item.name);
});
});
});
Aqui vemos três níveis de funções de setas aninhadas. Para se aprofundar no que está acontecendo neste código, você precisa gastar algum tempo.Várias abordagens podem ser usadas para melhorar a legibilidade das funções aninhadas.A primeira abordagem é escrever referências de função para variáveis. Os nomes de variáveis devem descrever brevemente a essência da função (veja a recomendação nº 1 sobre a derivação dos nomes das funções).const readItemsJson = json => {
json.forEach(item => console.log(item.name));
};
const handleButtonClick = () => {
fetch('/items.json')
.then(response => response.json());
.then(readItemsJson);
};
myButton.addEventListener('click', handleButtonClick);
Durante a refatoração, extraímos funções de seta aninhadas e as escrevemos nas variáveis readItemsJsone handleButtonClick. O nível de aninhamento do código diminuiu de 3 para 2. Agora, o código se tornou mais compreensível.Outra opção para refatorar esse código é converter toda a função em um formato async/await. Esta é uma ótima maneira de resolver o problema de funções aninhadas:const handleButtonClick = async () => {
const response = await fetch('/items.json');
const json = await response.json();
json.forEach(item => console.log(item.name));
};
myButton.addEventListener('click', handleButtonClick);
É recomendável evitar níveis de aninhamento muito profundos de funções de seta, extraindo-os em variáveis como funções separadas ou, se possível, usando sintaxe async/await.Sumário
As funções de seta do JavaScript são anônimas. Para tornar a depuração de código mais produtiva, é recomendável usar variáveis que armazenam referências de função. Isso permite que o JavaScript exiba nomes de funções.As funções de seta incorporadas são úteis quando o corpo da função contém apenas uma expressão.Operadores >, <, <=e >=como uma flecha =>que é usado quando declarar os interruptores de função. Quando esses operadores são usados no corpo de uma função de seta incorporável, você deve considerar a conversão de código.A sintaxe dos literais de objetos, como { prop: 'value' }, é como um bloco de código {}. Como resultado, quando um literal de objeto é colocado dentro de uma função de seta incorporada, ele deve estar entre parênteses:() => ({ prop: 'value' }).Níveis muito altos de aninhamento de funções confundem quem lê o código. É recomendável reduzir o nível de aninhamento de funções extraindo-as e gravando-as em variáveis. Outra abordagem para reduzir o nível de aninhamento de código é usar uma construção async/await.Queridos leitores! Você conhece algum truque interessante para usar as funções de seta?