Pourquoi ce gestionnaire d'événements a-t-il deux fonctions de flèche ?

Question

Quelqu'un peut-il m'aider à comprendre la structure de ce gestionnaire d'événements ? Pourquoi les deux fonctions flèches sont-elles alignées ?

const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args));

Answer 1

Il s'agit d'une fonction d'ordre supérieur - une fonction qui renvoie une autre fonction. Dans ce cas particulier, votre fonction, lorsqu'elle reçoit une liste de fonctions, renvoie une nouvelle fonction qui applique ces fonctions à son ou ses arguments. Cette fonction d'ordre supérieur est généralement appelée compose o pipe car c'est ce qu'il fait - il fait passer un argument par une série de fonctions, comme le font les pipes d'Unix (vous savez, comme grep | sort | uniq )

Notez que votre exemple n'est pas particulièrement idiomatique, une meilleure façon de l'écrire serait

pipe = (...fns) => x => fns.reduce((x, f) => f(x), x)

qui peut être utilisé comme

pipe = (...fns) => x => fns.reduce((x, f) => f(x), x)

upper = s => s.toUpperCase()
reverse = s  => [...s].reverse().join('')
bang = s => s + '!'

convert = pipe(reverse, upper, bang)

result = convert('hello')

console.log(result)

Answer 2

Il s'agit d'une fonction qui accepte n et renvoie une fonction qui, lorsqu'elle est appelée avec la fonction n appelle chacune des fonctions fournies avec ces arguments.

Voici le code développé :

// Accept functions
function callAll(...fns) {

  // Return a function that accepts arguments
  return function (...args) {

    // Which, when called, calls each function with
    // those arguments
    fns.forEach(function (fn) {
      return fn && fn(...args);
    });
  }
};

const addOne = (n) => console.log(n + 1);
const addTwo = (n) => console.log(n + 2);

const addAllTheThings = callAll(addOne, addTwo);
addAllTheThings(3);