Clever Geek Handbook

Ce dont les fonctions fléchées ont vraiment besoin dans JavaScript

Bonjour, Habr! Je présente à votre attention la traduction de l'article "La vraie raison pour laquelle JavaScript a des fonctions fléchées" de Martin Novák.





* phrase meme du jeu Skyrim



Si vous n’utilisez toujours pas les fonctions fléchées, ne vous blâmez pas - c’est le travail de vos parents; pensez plutôt aux avantages que vous pouvez tirer de leur utilisation en tant qu’étudiant assidu. Aujourd'hui, tout mon code est écrit à l'aide des fonctions fléchées.



Voici un exemple du mĂŞme code, Ă©galement Ă©crit dans le style traditionnel: 



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

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


Vous remarquerez peut-être que le code est beaucoup plus court lorsqu'il est écrit à l'aide d'une fonction fléchée. Tout ce qui est écrit avant la flèche est les arguments, après la flèche est le résultat renvoyé.

Si vous avez besoin d'une fonction qui contient plusieurs actions, vous pouvez l'Ă©crire comme ceci: 



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


Les fonctions fléchées sont également souvent appelées fonctions lambda et ne sont pas utilisées uniquement en JavaScript. Python est un bon exemple où les fonctions lambda se produisent également.



En Python, leur syntaxe est la suivante: 



lambdaFunction = lambda a, b : a + b


Simplifier



L'utilisation des fonctions fléchées vous motive à simplifier votre code selon le principe KISS (Keep-it-simple-stupid) et le principe de responsabilité unique (chaque fonction est responsable d'une seule action spécifique).



En général, je les écris sans accolades {}. Si une fonction est difficile à lire ou si vous devez y utiliser plusieurs expressions, je vous conseille de la décomposer en plusieurs plus petites.

Ce code est plus facile à écrire, plus facile à réutiliser et à tester. En outre, les fonctions peuvent recevoir des noms plus descriptifs pour représenter avec précision le travail qu'elles font.



Fonctions de première classe



JavaScript a des fonctions de première classe. Ce sont des fonctions qui sont utilisées comme des variables régulières. Ils peuvent servir d'arguments à d'autres fonctions ou les renvoyer en conséquence. Un exemple que vous connaissez très probablement: 



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


Voici une fonction anonyme passée en argument à addEventListener. Cette technique est souvent utilisée en Javascript pour les rappels.



Un exemple de renvoi d'une fonction est différent - illustré ci-dessous: 



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

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


Cependant, avec la fonction flèche, tout semble beaucoup plus propre: 



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

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


Tout est simple ici: ce qui est écrit avant la dernière flèche, ce sont les arguments, et après c'est le calcul. En fait, nous travaillons avec plusieurs fonctions, et nous pouvons également utiliser plusieurs appels fn (call1) (call2);



Application partielle



Vous pouvez commencer à utiliser des fonctions fléchées pour composer, comme des briques Lego, des fonctions partiellement applicables. Cela vous permettra de créer des fonctions personnalisées en leur passant des arguments spécifiques. Décomposons-le dans l'exemple ci-dessous: 



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

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

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


Ceci est similaire à l'utilisation de fonctions avec des variables par défaut, mais une application partielle donne plus de flexibilité.



Ces fonctions sont appelées curry. Il s'agit d'une séquence de fonctions unaires et de monades communes dans la programmation fonctionnelle.



Programmation fonctionnelle



Comme vous l'avez peut-être deviné, la principale raison des fonctions fléchées est la programmation fonctionnelle. C'est un paradigme de style déclaratif basé sur la composition de fonctions simples.



La programmation fonctionnelle est une alternative à la POO préférée par de nombreux développeurs (y compris l'auteur de l'article). Vous pouvez plaider pour n'importe quel style, mais je pense que la programmation fonctionnelle est cool et qu'elle devrait vous mettre mal à l'aise de penser que vous aviez autrefois pensé différemment.



Les fonctions pures reposent uniquement sur l'entrée et renvoient toujours une certaine valeur. Ils ne changent jamais (mutent) d'autres variables et ne dépendent pas de données externes en dehors des valeurs d'entrée. Cela conduit à une transparence référentielle, ce qui facilite la programmation.



Et oui, il est toujours possible d'écrire une énorme quantité de code sans changer une seule variable.



Comme vous pouvez le voir, les fonctions fléchées sont conçues pour transformer les données entre l'entrée et la sortie. Ils n'ont même pas besoin de renvoyer une expression abrégée sans accolades.



Fonctions fléchées - conclusion



Les fonctions fléchées raccourcissent votre syntaxe, réduisent le temps d'écriture, de lecture et de test de votre code et le simplifient. Pensez-y, car vous êtes probablement un développeur avancé, et l'application de ces conseils vous rendra plus avancé et augmentera votre pertinence. La programmation fonctionnelle est vraiment cool. Cela fait de vous un artiste qui crée des fonctions courtes et élégantes à partir de code.



VĂ©ritable exemple fonctionnel



Pour comprendre ce qui se cache dans le terrier du lapin, jetons un coup d'œil à un exemple d'utilisation de la bibliothèque open-source @ 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.");
// =>    !


L'utilisation des fonctions fléchées et l'apprentissage de la programmation fonctionnelle sont très addictifs. Cela vous permet d'écrire un code plus court avec de meilleures performances et une meilleure réutilisabilité.



JavaScript peut être complexe dans son incohérence entre l'utilisation de la syntaxe de type C et les particularités de la programmation fonctionnelle. Pour aider les gens à mieux comprendre et leur donner accès au matériel d'apprentissage, j'ai développé la bibliothèque @ 7urtle / lambda. Vous pouvez maîtriser la programmation fonctionnelle à votre rythme et www.7urtle.com vous aidera à apprendre ce paradigme en vous fournissant tous les outils dont vous avez besoin.


More articles:


All Articles