Introduction aux compétences JavaScript fonctionnelles (1)_javascript

Faisons comme si nous devions accomplir une tâche maintenant : écrire du code JavaScript selon les principes des langages fonctionnels autant que possible.

La série d'articles suivante est conçue pour vous permettre de commencer un tel voyage avec moi. Tout d’abord, nous devons corriger certaines idées fausses sur les langages fonctionnels que vous pourriez avoir en tête.

Les expressions fonctionnelles en langage JS sont sérieusement mal comprises.

De toute évidence, de nombreux développeurs utilisent quotidiennement le paradigme fonctionnel de JavaScript. Je dirais qu'une plus grande partie des développeurs JavaScript ne comprennent pas vraiment ces choses.

Je pense que la raison en est que la plupart des langages de développement​​utilisés sur le serveur web sont dérivés du C, et tout le monde sait que ces langages​​ne sont pas des langages fonctionnels.

Il existe généralement deux niveaux de confusion. Le premier niveau concerne l'utilisation dans l'exemple suivant, qui est une utilisation très courante dans jQuery :

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

Dans le code ci-dessus : nous passons une fonction anonyme en paramètre, qui est la fameuse fonction de rappel en JavaScript. Ces fonctions seront-elles appelées ? Pas du tout!

L'exemple ci-dessus illustre une caractéristique clé des langages fonctionnels : une fonction est un paramètre. D’un autre côté, cet exemple viole presque tous les paradigmes de programmation fonctionnelle qui peuvent être violés en seulement trois lignes de code.

Le deuxième niveau de confusion est plus subtil. Regardez ceci : c'est ainsi que seule une poignée de développeurs JS branchés se voient :

Hmm, c'est super ! Mais je comprends déjà parfaitement la programmation fonctionnelle et j'utilise Underscore.js dans tous mes projets.

Underscore.js est une bibliothèque JavaScript très connue et omniprésente. Par exemple : disons que j’ai un ensemble de mots et que j’ai besoin des deux premières lettres de chaque mot. C'est très simple à écrire en utilisant Underscore.js :

var firstTwoLetters = function(words){
    return _.map(words,function(word){
        return _.first(word,2);
    });
};

Regardez cet exemple JavaScript. J'ai utilisé les fonctions élégantes et pratiques dans un style fonctionnel : _.map et _.first. Que pensez-vous de cela ?

Bien que des fonctions comme underscore.js et _.map soient des exemples utiles du paradigme fonctionnel, les assembler comme cet exemple me semble un peu déroutant. Avons-nous vraiment besoin de faire cela ?

Si nous commençons à réfléchir à la manière d'être plus « fonctionnel », nous pourrions peut-être réécrire l'exemple ci-dessus comme ceci :

// ...a little bit of magic
var firstTwoLetters = map(first(2));

Réfléchissez bien, cette ligne de code a le même effet que les 5 lignes ci-dessus. De nombreux mots ne sont que des paramètres ou des espaces réservés. La vraie logique réside dans la combinaison significative de la fonction map, de la première fonction et de la constante 2.

Certains d’entre vous se demandent peut-être : quelle est la magie dans cet exemple ? Après tout, qualifier un exemple de magique, c’est un peu comme se vanter, n’est-ce pas ?

Je prévois d'utiliser les deux prochains articles pour expliquer la magie de l'exemple ci-dessus. Si vous êtes curieux, vous pouvez continuer à lire.

Cette série de blogs a pour but de vous aider à appliquer la beauté de la programmation fonctionnelle à votre code JavaScript.

Dans la section suivante, je discuterai de divers éléments fonctionnels et non fonctionnels du langage JavaScript. Grâce à ces connaissances, nous pouvons lentement former dans notre esprit un système complet de programmation fonctionnelle en intégrant ces éléments et comprendre leurs performances en JavaScript.