5 façons de rendre votre javascript plus fonctionnel

Cet article présentera brièvement le concept de programmation fonctionnelle et expliquera cinq façons d'améliorer le style fonctionnel du code JavaScript.

Points de base

• La programmation fonctionnelle est un paradigme de programmation qui utilise des fonctions et leurs applications plutôt que des listes de commandes. Il est plus abstrait et provenant des mathématiques. JavaScript convient particulièrement à la programmation fonctionnelle car les fonctions sont le premier type d'objets.
• Les fonctions pures sont un élément clé de la programmation fonctionnelle. Compte tenu des mêmes arguments, ils renvoient toujours la même valeur et ne modifient pas ce qui est en dehors de la portée de la fonction. Ils rendent votre code plus facile à porter et à tester.
• Dans la programmation fonctionnelle, les variables doivent rester inchangées. Après avoir réglé la variable, il devrait rester cet état tout au long du programme. Cela peut être réalisé en déclarant toujours les variables en utilisant const.
• Il est recommandé d'utiliser les fonctions flèches et les opérateurs ternaires dans la programmation fonctionnelle de JavaScript. Les fonctions de flèche ont des valeurs de retour implicites, ce qui aide à visualiser le mappage d'entrée à sortie. L'opérateur ternaire est une expression qui renvoie toujours une valeur, il est donc utile de s'assurer que la valeur de retour existe.
• Utiliser for Les boucles dans la programmation fonctionnelle doivent être évitées car elles dépendent des états mutables. Les méthodes de tableau récursives et d'ordre supérieur doivent être utilisées à la place. De plus, la coercition de type doit être évitée pour maintenir la cohérence du type. Cela peut être fait en écrivant des commentaires de déclaration de type avant de déclarer la fonction.

Qu'est-ce que la programmation fonctionnelle?

La programmation fonctionnelle est un paradigme de programmation qui utilise les fonctions et leurs applications, plutôt qu'une liste de commandes utilisées dans le langage de programmation impératif .

Il s'agit d'un style de programmation plus abstrait, avec des racines en mathématiques - en particulier la branche mathématique appelée Calculus Lambda, conçue par le mathématicien Alonzo Church en 1936 comme modèle formel de computation. Il se compose d'expressions et de fonctions qui mappent une expression à une autre. Fondamentalement, c'est ce que nous faisons dans la programmation fonctionnelle: nous utilisons des fonctions pour convertir les valeurs en différentes valeurs.

L'auteur de cet article est tombé amoureux de la programmation fonctionnelle ces dernières années. Nous avons commencé à utiliser des bibliothèques JavaScript qui encouragent les styles plus fonctionnels, puis avons sauté directement dans les eaux profondes en apprenant à écrire du code dans Haskell.

Haskell est un langage de programmation purement fonctionnel développé dans les années 1990, similaire à Scala et Clojure. Avec ces langues, vous serez obligé de coder dans un style fonctionnel. Apprendre Haskell nous donne une réelle compréhension de tous les avantages de la programmation fonctionnelle.

JavaScript est un langage multi-paradigme car il peut être utilisé pour programmer dans un style impératif, orienté objet ou fonctionnel. Cependant, il correspond particulièrement bien au style fonctionnel, car les fonctions sont des objets de première classe, ce qui signifie qu'ils peuvent être affectés à des variables. Cela signifie également que les fonctions peuvent être transmises en tant qu'arguments à d'autres fonctions (généralement appelées rappels) ou comme valeurs de retour pour d'autres fonctions. Les fonctions qui renvoient d'autres fonctions ou acceptent d'autres fonctions comme paramètres sont appelées fonctions d'ordre supérieur, et elles sont la partie de base de la programmation fonctionnelle.

Ces dernières années, la programmation JavaScript dans un style fonctionnel est devenue de plus en plus populaire, en particulier après la montée en puissance de la réaction. React utilise une API déclarative adaptée aux méthodes fonctionnelles, donc une compréhension solide des principes de programmation fonctionnelle améliorera votre code de réact.

Pourquoi la programmation fonctionnelle est-elle si excellente?

En bref, les langages de programmation fonctionnelle conduisent souvent au code concis, clair et élégant. Le code est généralement plus facile à tester et peut s'exécuter dans un environnement multithread sans aucun problème.

Si vous parlez à de nombreux programmeurs différents, vous pouvez obtenir des opinions complètement différentes sur la programmation fonctionnelle de tout le monde - de ceux qui le détestent absolument à ceux qui l'aiment absolument. Nous (l'auteur de cet article) sommes du côté de "Love It", mais nous comprenons parfaitement que ce n'est pas le plat de tout le monde, d'autant plus qu'il est très différent de la façon dont nous enseignons habituellement.

Mais une fois que vous maîtrisez la programmation fonctionnelle, et une fois que le processus de réflexion clique en place, il devient une seconde nature et modifie la façon dont vous écrivez votre code.

Règle 1: Purifiez votre fonction

La partie clé de la programmation fonctionnelle est de s'assurer que les fonctions que vous écrivez sont "pures". Si vous n'êtes pas familier avec ce terme, les fonctions pures remplissent essentiellement les conditions suivantes:

• Il a la transparence de la citation. Cela signifie que, compte tenu du même argument, la fonction renverra toujours la même valeur. Tout appel de fonction peut être remplacé par la valeur de retour et le programme s'exécutera toujours de la même manière. Il n'a aucun effet secondaire. Cela signifie que la fonction n'apporte aucune modification en dehors de la portée de la fonction. Cela peut inclure la modification de la valeur globale, l'enregistrement vers la console ou la mise à jour du DOM.
Fonction pure

doit avoir au moins un paramètre, et

doit renvoyer une valeur. Si vous pensez attentivement, s'ils n'acceptent aucun paramètre, ils n'auront pas de données à utiliser, et s'ils ne renvoient pas de valeurs, quel est l'intérêt de la fonction? Les fonctions pures peuvent ne pas sembler complètement nécessaires au début, mais l'utilisation de fonctions impures entraînera des changements globaux dans le programme, ce qui entraîne de graves erreurs logiques! Exemple:

Dans les fonctions impurs, la fonction

dépend de la variable mutable

. Par exemple, si la variable

<code class="language-javascript">// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};</code>

est mise à jour plus tard dans le programme, la fonction

peut renvoyer un booléen en utilisant la même entrée. checkAge minimum Supposons que nous exécutions le code suivant: minimum checkAge

Maintenant, supposons que plus tard dans le code, la fonction

met à jour la valeur de

à 18.

<code class="language-javascript">checkAge(20); // false</code>

Ensuite, supposons que nous exécutions le code suivant:

<code class="language-javascript">// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};</code>

La fonction checkAge est désormais évaluée à différentes valeurs, bien que la même entrée soit donnée.

Les fonctions pures rendent votre code plus facile à porter car ils ne dépendent pas d'une autre valeur autre que n'importe quelle valeur fournie comme paramètres. Le fait que la valeur de retour ne change jamais rend les fonctions pures plus faciles à tester.

L'écriture de fonctions pures élimine également également la possibilité de mutations et d'effets secondaires.

Les mutations

sont un gros drapeau rouge dans la programmation fonctionnelle, et si vous voulez en savoir plus, vous pouvez les lire dans le guide de l'affectation et de la mutation variables en JavaScript.

Pour rendre votre fonction plus facile à porter, assurez-vous que votre fonction est toujours pure.

Règle 2: Gardez la variable inchangée

Déclarer les variables est l'une des premières choses que tout programmeur apprend. Il devient trivial, mais il est extrêmement important lors de l'utilisation de styles de programmation fonctionnelle.

L'un des principaux principes de la programmation fonctionnelle est qu'une fois qu'une variable est définie, elle restera cet état tout au long du programme.

Il s'agit de l'exemple le plus simple de la façon dont la réaffectation / la redéclations des variables dans votre code peut être une catastrophe:

<code class="language-javascript">checkAge(20); // false</code>

Si vous y pensez soigneusement, les valeurs de n ne peuvent pas être à la fois 10 et 11;

Une pratique de codage commune dans la programmation impérative consiste à utiliser le code suivant pour incrémenter la valeur:

<code class="language-javascript">checkAge(20); // true</code>

En mathématiques, la déclaration x = x 1 est illogique car si vous soustraire x des deux côtés, vous obtiendrez 0 = 1, ce qui est évidemment incorrect.

Par conséquent, dans Haskell, vous ne pouvez pas affecter une variable à une valeur, puis la réaffecter à une autre valeur. Pour y parvenir en JavaScript, vous devez suivre les règles qui utilisent toujours const pour déclarer des variables.

Règle 3: Utilisez la fonction de flèche

En mathématiques, le concept d'une fonction est le concept de cartographier un ensemble de valeurs à une autre. La figure suivante montre une fonction qui mappe la valeur définie à gauche à la valeur définie à droite à travers le carré:

C'est ainsi que vous l'écrivez en mathématiques à l'aide de la notation de la flèche: F: X → X². Cela signifie que la fonction F mappe la valeur x à x².

Nous pouvons écrire cette fonction presque de la même manière en utilisant la fonction flèche:

<code class="language-javascript">const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."</code>

Une caractéristique clé de l'utilisation du style fonctionnel dans JavaScript est l'utilisation des fonctions fléchées plutôt que des fonctions régulières. Bien sûr, cela se résume au style, l'utilisation de fonctions flèches au lieu de fonctions régulières n'affecte pas réellement le degré de "fonctionnel" du code.

Cependant, l'une des choses les plus difficiles à s'adapter lors de l'utilisation de styles de programmation fonctionnelle est la façon de penser à chaque fonction comme une entrée de cartographie à la sortie. Il n'y a pas de soi-disant processus. Nous avons constaté que l'utilisation des fonctions flèches peut nous aider à mieux comprendre le processus de fonctions.

La fonction de flèche a une valeur de retour implicite, qui aide à visualiser cette carte.

Les structures des fonctions de flèche - en particulier leurs valeurs de retour implicites - encouragent l'écriture de fonctions pures, car leur structure est en fait "mappée d'entrée à la sortie":

<code class="language-javascript">// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};</code>

Une autre chose que nous aimons souligner, en particulier lors de l'écriture de fonctions de flèche, est d'utiliser des opérateurs ternaires. Si vous n'êtes pas familier avec les opérateurs ternaires, ce sont des instructions en ligne if...else dans la forme condition ? value if true : value if false.

Vous pouvez en savoir plus à leur sujet dans des conseils rapides: comment utiliser les opérateurs tripartites en JavaScript.

L'une des principales raisons d'utiliser des opérateurs ternaires dans la programmation fonctionnelle est la nécessité des instructions else. Le programme doit savoir quoi faire si les conditions d'origine ne sont pas remplies. Par exemple, Haskell applique une instruction , et si aucune instruction else n'est donnée, elle renvoie une erreur. else

Une autre raison d'utiliser des opérateurs ternaires est que ce sont des expressions qui renvoient toujours des valeurs, plutôt que

des instructions qui peuvent être utilisées pour effectuer des opérations qui peuvent avoir des effets secondaires. Ceci est particulièrement utile pour les fonctions flèches, car cela signifie que vous pouvez vous assurer que la valeur de retour existe et conserver l'entrée de l'image sur la carte de sortie. Si vous n'êtes pas sûr de la nuance entre les déclarations et les expressions, un guide sur les déclarations et les expressions vaut bien la peine d'être lu. if-else

Pour illustrer ces deux conditions, ce qui suit est un exemple de fonction de flèche simple utilisant l'opérateur ternaire:

La fonction

<code class="language-javascript">checkAge(20); // false</code>

renvoie la valeur de "manger" ou "sommeil" en fonction de la valeur du paramètre action. state

Donc, en bref: lorsque vous rendez votre code plus fonctionnel, vous devez suivre ces deux règles:

Fonctions d'écriture à l'aide de la notation des flèches
Remplacez l'instruction
• par l'opérateur ternaire if...else

Règle 4: supprimez la boucle pour

Étant donné que l'écriture de code itérative utilisant

est très courante dans la programmation, il semble étrange de dire que vous voulez les éviter. En fait, lorsque nous avons découvert pour la première fois que Haskell n'avait même aucune sorte d'opération de boucle for, nous avons eu du mal à comprendre comment mettre en œuvre certaines opérations standard. Cependant, il existe de très bonnes raisons pour lesquelles les boucles for n'apparaissent pas dans la programmation fonctionnelle, et nous avons rapidement découvert que chaque type d'itération peut être implémenté sans utiliser for boucles. for

non utilisé

La raison la plus importante pour laquelle les boucles sont en boucle est qu'elles dépendent des états mutables. Regardons une fonction de somme simple: for

<code class="language-javascript">checkAge(20); // true</code>

Comme vous pouvez le voir, nous devons utiliser

dans la boucle for elle-même et dans les variables que nous mettons à jour dans la boucle for. let

Comme mentionné précédemment, il s'agit généralement d'une mauvaise pratique dans la programmation fonctionnelle, car toutes les variables de programmation fonctionnelle devraient être immuables.

Si nous voulons écrire du code où toutes les variables sont immuables, nous pouvons utiliser la récursivité:

<code class="language-javascript">const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."</code>

Comme vous pouvez le voir, aucune variable n'est mise à jour.

Les mathématiciens parmi nous sauront évidemment que tout ce code n'est pas nécessaire, car nous pouvons simplement utiliser la formule sommer intelligente 0,5 * n * (n 1). Mais c'est un excellent moyen d'illustrer la différence entre la variabilité d'une boucle et une récursivité. for

Cependant, la récursivité n'est pas la seule solution au problème de variabilité, en particulier lorsqu'il s'agit de tableaux. JavaScript possède de nombreuses méthodes de tableau d'ordre supérieur intégrées qui parcourent les valeurs dans un tableau sans modifier aucune variable.

Par exemple, supposons que nous voulons ajouter 1 à chaque valeur dans le tableau. En utilisant la méthode impérative et la boucle

, notre fonction peut ressembler à ceci: for

<code class="language-javascript">// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};</code>

Cependant, nous pouvons utiliser la méthode

intégrée de JavaScript et écrire une fonction comme celle-ci: map

<code class="language-javascript">checkAge(20); // false</code>

Si vous n'avez jamais vu

fonctions auparavant, cela vaut vraiment la peine de les connaître - et toutes les méthodes de tableau de haut niveau intégrées de JavaScript, comme map, surtout si vous avez vraiment un sens de la programmation fonctionnelle dans l'intérêt JavaScript. Vous pouvez en savoir plus à leur sujet dans les méthodes de tableau immuables: comment écrire du code JavaScript très clair. filter

Haskell n'a aucune boucle

. Pour rendre votre JavaScript plus fonctionnel, essayez d'éviter d'utiliser des boucles for en utilisant des méthodes de tableau récursives et intégrées d'ordre supérieur. for

Règle 5: Évitez le type obligatoire

Il est facile d'oublier l'importance des types de données lors de la programmation dans des langages tels que JavaScript qui ne nécessitent pas de déclarations de type. Les sept types de données primitifs utilisés dans JavaScript sont:

numéro
String
booléen
symbole
bigint
Undefined
null

Haskell est un langage fortement dactylographié qui nécessite des déclarations de type. Cela signifie qu'avant toute fonction, vous devez utiliser le système Hindley-Milner pour spécifier le type de données entrant et la sortie du type de données.

Exemple:

<code class="language-javascript">checkAge(20); // true</code>

Il s'agit d'une fonction très simple qui ajoute deux nombres (x et y) ensemble. Pour chaque fonction, y compris des fonctions très simples comme celle-ci, il semble un peu ridicule de devoir expliquer le type de données au programme, mais cela aide finalement à montrer comment la fonction devrait fonctionner et ce qu'elle devrait revenir. Cela rend le code plus facile à déboguer, surtout si le code devient plus complexe.

La déclaration de type suit la structure suivante:

La force de type peut être un gros problème lors de l'utilisation de JavaScript, qui a diverses astuces qui peuvent être utilisées (même

abus

<code class="language-javascript">const n = 10;
n = 11; // TypeError: "Attempted to assign to readonly property."</code>

) pour contourner les incohérences dans les types de données. Voici les conseils les plus courants et comment les éviter:

connexion. "Hello" 5 est évalué comme "Hello5", qui n'est pas cohérent. Si vous souhaitez concaténer les chaînes avec des valeurs numériques, vous devez écrire la chaîne "Hello" (5).

Énoncé booléen et 0. Dans JavaScript, la valeur 0 dans l'instruction
• est équivalente à false. Cela peut conduire à des techniques de programmation paresseuses qui ignorent la vérification si les données numériques sont égales à 0.
• if Exemple:

<code class="language-javascript">// 不纯
let minimum = 21;
const checkAge = (age) => age >= minimum;

// 纯
const checkAge = (age) => {
    const minimum = 21;
    return age >= minimum;
};</code>

Il s'agit d'une fonction qui évalue si un nombre est un nombre pair. Il utilise le symbole ! pour lancer le résultat de n % 2 à un booléen, mais le résultat de n % 2 n'est pas un booléen, mais un nombre (0 ou 1).

Des conseils comme celui-ci, bien que apparemment intelligents et réduisent la quantité de code que vous écrivez, ils enfreignent les règles de cohérence des types de programmation fonctionnelle. Par conséquent, la meilleure façon d'écrire cette fonction est la suivante:

<code class="language-javascript">checkAge(20); // false</code>

Un autre concept important est de s'assurer que toutes les valeurs de données dans le tableau sont du même type. JavaScript n'applique pas cela, mais s'il n'y a pas de même type, cela peut causer des problèmes lorsque vous souhaitez utiliser des méthodes de tableau d'ordre supérieur.

Par exemple, une fonction de produit qui multiplie tous les nombres dans un tableau et renvoie le résultat peut être écrit avec l'annotation de déclaration de type suivante:

<code class="language-javascript">checkAge(20); // true</code>

Ici, la déclaration de type indique clairement que l'entrée de la fonction est un tableau contenant des éléments de numéro de type, mais il ne renvoie qu'un seul numéro. La déclaration de type illustre clairement l'entrée et la sortie attendues de cette fonction. De toute évidence, cette fonction ne fonctionnera pas si le tableau contient plus que de simples chiffres.

Haskell est un langage fortement dactylographié, tandis que JavaScript est un langage faiblement dactylographié, mais pour rendre votre JavaScript plus fonctionnel, vous devez écrire des commentaires de déclaration de type avant de déclarer votre fonction et de vous assurer d'éviter les raccourcis forcés à type.

Nous devons également mentionner ici que si vous voulez une alternative fortement typée à JavaScript qui appliquera la cohérence de type pour vous, vous pouvez vous tourner vers TypeScript.

Conclusion

Dans l'ensemble, les cinq règles suivantes vous aideront à implémenter le code fonctionnel:

• Gardez votre fonction pur .
• Déclarer toujours les variables et les fonctions à l'aide de const .
• Utilisez la notation flèche pour la fonction.
• Évitez d'utiliser for boucle .
• Utilisez des annotations de déclaration de type et évitez les raccourcis forcés de type.

Bien que ces règles ne garantissent pas que votre code est purement fonctionnel, ils le rendront plus fonctionnel dans une large mesure et aideront à le rendre plus propre, plus clair et plus facile à tester.

Nous espérons vraiment que ces règles vous aideront autant que possible! Nous sommes tous les deux de grands fans de programmation fonctionnelle et nous recommandons fortement à tout programmeur l'utilise.

Si vous souhaitez approfondir le JavaScript fonctionnel, nous vous recommandons fortement de lire "la plupart du guide suffisant pour la programmation fonctionnelle du professeur Frisby, qui est disponible gratuitement en ligne. Si vous voulez tout faire pour apprendre Haskell, nous vous recommandons d'utiliser le tutoriel Try Haskell Interactive et de lire l'excellent livre Learn Haskell pour de plus grands avantages, qui est également disponible gratuitement en ligne.

Des questions fréquemment posées sur la programmation fonctionnelle JavaScript

Qu'est-ce que la programmation fonctionnelle en JavaScript? La programmation fonctionnelle est un paradigme de programmation qui traite les calculs comme des évaluations des fonctions mathématiques et évite de changer les états et les données mutables. En JavaScript, il s'agit d'utiliser des fonctions comme citoyens de première classe et d'éviter les effets secondaires.

Qu'est-ce qu'une fonction de première classe dans JavaScript? Une fonction de première classe dans JavaScript signifie que la fonction est traitée comme la même que toute autre variable. Ils peuvent se voir attribuer des valeurs à des variables, passer par des paramètres à d'autres fonctions et être renvoyés sous forme de valeurs d'autres fonctions.

Qu'est-ce que l'invariance dans la programmation fonctionnelle? L'invariance signifie qu'une fois un objet créé, il ne peut pas être modifié. Dans le contexte de la programmation fonctionnelle JavaScript, cela signifie éviter de modifier des variables ou des structures de données après leur initialisation.

Qu'est-ce qu'une fonction d'ordre supérieur? Une fonction d'ordre supérieur est une fonction qui prend d'autres fonctions comme paramètres ou renvoie les fonctions comme résultats. Ils prennent en charge les combinaisons de fonctions, ce qui facilite la création de code modulaire et réutilisable.

Y a-t-il une bibliothèque / framework qui facilite la programmation fonctionnelle en JavaScript? Oui, certaines bibliothèques et frameworks (tels que Ramda et Lodash) fournissent des utilitaires et des fonctions qui prennent en charge le concept de programmation fonctionnelle JavaScript. Ils peuvent aider à simplifier et à améliorer les pratiques de programmation fonctionnelle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!