Composition de fonction en JavaScript

La composition de fonction est l'application ponctuelle d'une fonction au résultat d'une autre. Les développeurs le font de manière manuelle tous les jours lorsque le nid fonctionne:

compose = (fn1, fn2) => value => fn2(fn1(value))

Mais c'est difficile à lire. Il existe une meilleure façon d'utiliser la composition de fonctions. Au lieu de les lire de l'intérieur:

add2AndSquare = (n) => square(add2(n))

Nous pouvons utiliser une fonction d'ordre supérieur pour les enchaîner de manière ordonnée.

add2AndSquare = compose( add2, square)

Une implémentation simple de compose serait:

compose = (f1, f2) => value => f2( f1(value) );

Pour obtenir encore plus de flexibilité, nous pouvons utiliser la fonction reductionRight:

compose = (...fns) => (initialVal) => fns.reduceRight((val, fn) => fn(val), initialVal);

La lecture de la composition de gauche à droite permet un enchaînement clair des fonctions d'ordre supérieur. Des exemples du monde réel ajoutent des authentifications, des propriétés de journalisation et de contexte. C'est une technique qui permet une réutilisabilité au plus haut niveau. Voici quelques exemples de son utilisation:

// example const add2 = (n) => n + 2; const times2 = (n) => n * 2; const times2add2 = compose(add2, times2); const add6 = compose(add2, add2, add2); times2add2(2); // 6 add2tiems2(2); // 8 add6(2); // 8

Vous pourriez penser qu'il s'agit d'une programmation fonctionnelle avancée et qu'elle n'est pas pertinente pour la programmation frontale. Mais c'est également utile dans les applications à page unique. Par exemple, vous pouvez ajouter un comportement à un composant React en utilisant des composants d'ordre supérieur:

function logProps(InputComponent) { InputComponent.prototype.componentWillReceiveProps = function(nextProps) { console.log('Current props: ', this.props); console.log('Next props: ', nextProps); }; return InputComponent; } // EnhancedComponent will log whenever props are received const EnhancedComponent = logProps(InputComponent);

En conclusion, la composition des fonctions permet la réutilisation des fonctionnalités à un niveau très élevé. Si les fonctions sont bien structurées, cela permet aux développeurs de créer un nouveau comportement basé sur un comportement existant.

Cela augmente également la lisibilité des implémentations. Au lieu d'imbriquer des fonctions, vous pouvez clairement enchaîner les fonctions et créer des fonctions d'ordre supérieur avec des noms significatifs.