Dans cet article, essayons de comprendre comment nous pouvons créer des fonctionnalités complexes en composant des fonctions plus petites en JavaScript.

MANGER, DORMIR, CODE — Approche imbriquée

Supposons que nous voulions effectuer l'activité « MANGER, DORMIR, CODE » et répétez-la à nouveau. Voici une approche comment nous pourrions le faire.

const activity = (str) => str.toUpperCase();
const sleep = (str) => `${str} SLEEP`;
const code = (str) => `${str} CODE`;
const repeat = (str) => `${str} | ${str}`;

// EAT SLEEP CODE | EAT SLEEP CODE
console.log(
  repeat(code(sleep(activity('eat'))))
  );

MANGER, DORMIR, CODE — Composition d'ordre supérieur

Nous verrons comment nous pourrions améliorer cela en utilisant une fonction d'ordre supérieur qui créerait une composition pour nous.

const activity = (str) => str.toUpperCase();
const sleep = (str) => `${str} SLEEP`;
const code = (str) => `${str} CODE`;
const repeat = (str) => `${str} | ${str}`;

// Higher order function that accepts any number of functions as arguments
const compose = (...fns) => x => fns.reduce((acc, fn)=> fn(acc),x);
const myRoutine = compose(activity, sleep, code, repeat);

// EAT SLEEP CODE | EAT SLEEP CODE
console.log(myRoutine('eat'));

• La méthode compose peut accepter plusieurs fonctions comme arguments à l'aide d'un opérateur de repos.
• Ensuite, il renvoie une fonction qui attend sa valeur initiale.
• Dans cette fonction retournée, nous pouvons accéder au tableau des fonctions qui ont été passées en argument (fermeture).
• L'ordre de la fonction va de gauche à droite. Nous allons donc utiliser la méthode reduce, qui accepte un accumulateur et la valeur actuelle qui est une fonction. Cela renverra le résultat de la valeur accumulée sur la fonction actuelle.
• Le deuxième argument de la réduction est notre valeur initiale x.
• Nous pouvons donc enfin créer notre routine en composant toutes nos activités. La routine doit être appelée en passant l'argument de la première fonction.

Voici la vue éclatée de la fonction de composition pour plus de clarté.

// Arrow variant
const compose = (...fns) => x => fns.reduce((acc, fn)=> fn(acc),x);

// Non arrow variant
function compose(...fns) {
  return function (x) {
    return fns.reduce((acc, fn) => fn(acc), x);
  };
}

Cette approche présente les avantages ci-dessous :

• Aide à réduire la lourdeur causée par l'imbrication de plusieurs fonctions.
• Lisible et évolutif