Clever Geek Handbook

O que as funções de seta realmente precisam em JavaScript

Olá, Habr! Apresento a sua atenção a tradução do artigo "O verdadeiro motivo do JavaScript ter funções de seta", de Martin Novák.





* frase meme do jogo Skyrim



Se você ainda não usa as funções das flechas, não se culpe - esse é o trabalho dos seus pais; em vez disso, pense nos benefícios que você pode obter ao usá-los como um aluno diligente. Hoje todo o meu código é escrito usando funções de seta.



Este é um exemplo do mesmo código, escrito também no estilo tradicional: 



const arrowFunction = (arg1, arg2) => arg1 + arg 2;

const traditionalFunction = function(arg1, arg2) {
  return arg1 + arg2;
};


Você pode notar que o código é muito mais curto quando escrito com uma função de seta. Tudo o que está escrito antes da seta são os argumentos, depois da seta é o resultado retornado.

Se você precisa de uma função que contém várias ações, pode escrevê-la assim: 



const arrowFunction = (arg1, arg2) => {
  const result = arg1 + arg2;
  return result;
};


As funções de seta também são frequentemente chamadas de funções lambda e não são usadas apenas em JavaScript. Python é um bom exemplo de onde as funções lambda também ocorrem.



Em Python, sua sintaxe é a seguinte: 



lambdaFunction = lambda a, b : a + b


Simplificar



O uso de funções de seta motiva você a simplificar seu código de acordo com o princípio KISS (Keep-it-simple-stupid) e o princípio de responsabilidade única (cada função é responsável por apenas uma ação específica).



Em geral, eu os escrevo sem chaves {}. Se uma função for difícil de ler ou você precisar usar várias expressões nela, aconselho que divida em várias outras menores.

Este código é mais fácil de escrever, mais fácil de reutilizar e testar. Além disso, as funções podem receber nomes mais descritivos para representar com precisão o trabalho que estão fazendo.



Funções de primeira classe



JavaScript tem funções de primeira classe. Essas são funções usadas como variáveis ​​regulares. Eles podem atuar como argumentos para outras funções ou retorná-los como resultado. Um exemplo com o qual você provavelmente está familiarizado: 



document.querySelector('#myButton').addEventListner('click', function() {
  alert('click happened');
});


É mostrada aqui uma função anônima passada como um argumento para addEventListener. Este método é freqüentemente usado em Javascript para callbacks.



Um exemplo de retorno de uma função é diferente - mostrado abaixo: 



const myFirstClassFunction = function(a) {
  return function(b) {
    return a + b;
  };
};

myFirstClassFunction(1)(2); // => 3


No entanto, com a função de seta, tudo parece muito mais limpo: 



const myFirstClassArrow = a => b => a + b;

myFirstClassArrow(1)(2); // => 3


Tudo é simples aqui: o que está escrito antes da última seta são os argumentos e, depois, o cálculo. Na verdade, estamos trabalhando com várias funções e também podemos usar várias chamadas fn (call1) (call2);



Aplicação parcial



Você pode começar a usar as funções de seta para compor, como peças de Lego, funções parcialmente aplicáveis. Isso permitirá que você crie funções personalizadas passando argumentos específicos para elas. Vamos decompô-lo no exemplo abaixo: 



const add = a => b => a + b;

const increaseCounter = counter => add(1)(counter);
increaseCounter(5); // => 6

const pointFreeIncreaseCounter = add(1);
pointFreeIncreaseCounter(5); // => 6


Isso é semelhante ao uso de funções com variáveis ​​padrão, mas a aplicação parcial oferece mais flexibilidade.



Essas funções são chamadas de curried. Eles são uma sequência de funções unárias e mônadas comuns na programação funcional.



Programação funcional



Como você deve ter adivinhado, o principal motivo das funções de seta é a programação funcional. É um paradigma de estilo declarativo baseado na composição de funções simples.



A programação funcional é uma alternativa ao OOP preferido por muitos desenvolvedores (incluindo o autor do artigo). Você pode argumentar a favor de qualquer estilo, mas acho que a programação funcional é legal e você deve se sentir desconfortável só de pensar que antes pensava de forma diferente.



As funções puras dependem apenas da entrada e sempre retornam algum valor. Eles nunca mudam (mutam) outras variáveis ​​e não dependem de dados externos fora dos valores de entrada. Isso leva à transparência referencial, o que torna a programação mais fácil.



E sim, sempre é possível escrever uma grande quantidade de código sem alterar uma única variável.



Como você pode ver, as funções de seta são projetadas para transformar dados entre entrada e saída. Eles nem precisam retornar uma expressão abreviada sem colchetes.



Funções de seta - conclusão



As funções de seta tornam sua sintaxe mais curta, reduzindo o tempo para escrever, ler e testar seu código e simplificá-lo. Pense nisso, porque provavelmente você é um desenvolvedor avançado, e aplicar essas dicas o deixará mais avançado e aumentará sua relevância. A programação funcional é muito legal. Isso o transforma em um artista que cria funções curtas elegantes a partir do código.



Exemplo funcional real



Para entender o que está escondido na toca do coelho, vamos dar uma olhada em um exemplo de uso da biblioteca de código aberto @ 7urtle / lambda 



import {trim, upperCaseOf, lengthOf, lastLetterOf, includes, compose} from '@7urtle/lambda';

const endsWithPunctuation = input =>
  includes(lastLetterOf(input))('.?,!');

const replacePunctuationWithExclamation = input =>
  substr(lengthOf(input) - 1)(0)(input) + '!';

const addExclamationMark = input =>
  endsWithPunctuation(input)
    ? replacePunctuationWithExclamation(input)
    : input + '!';

const shout = compose(addExclamationMark, upperCaseOf, trim);

shout(" Don't forget to feed the turtle.");
// =>    !


Usar funções de seta e aprender programação funcional é muito viciante. Isso permite que você escreva um código mais curto com melhor desempenho e capacidade de reutilização.



JavaScript pode ser complexo em sua inconsistência entre o uso da sintaxe semelhante ao C e as peculiaridades da programação funcional. Para ajudar as pessoas a entender melhor e fornecer acesso a materiais de aprendizagem, desenvolvi a biblioteca @ 7urtle / lambda. Você pode dominar a programação funcional em seu próprio ritmo e www.7urtle.com o ajudará a aprender esse paradigma, fornecendo todas as ferramentas de que você precisa.


More articles:


All Articles