In diesem Artikel versuchen wir zu verstehen, wie wir komplexe Funktionen erstellen können, indem wir kleinere Funktionen in JavaScript zusammenstellen.

EAT, SLEEP, CODE – Verschachtelter Ansatz

Nehmen wir an, wir wollen die Aktivität „EAT, SLEEP, CODE“ durchführen und wiederholen diese noch einmal. Hier ist ein Ansatz, wie wir dies tun könnten.

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'))))
  );

EAT, SLEEP, CODE – Zusammensetzung höherer Ordnung

Wir werden uns ansehen, wie wir dies besser machen könnten, indem wir Funktionen höherer Ordnung verwenden, die eine Komposition für uns erstellen würden.

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'));

• Die Methode compose kann mithilfe eines Restoperators mehrere Funktionen als Argumente akzeptieren.
• Dann gibt es eine Funktion zurück, die auf ihren Anfangswert wartet.
• Innerhalb dieser zurückgegebenen Funktion können wir auf das Array von Funktionen zugreifen, die als Argument (Abschluss) übergeben wurden.
• Die Reihenfolge der Funktion geht von links nach rechts. Also verwenden wir die Reduce-Methode, die einen Akkumulator und den aktuellen Wert akzeptiert, der eine Funktion ist. Dies gibt das Ergebnis des akkumulierten Werts der aktuellen Funktion zurück.
• Das zweite Argument für die Reduzierung ist unser Anfangswert x.
• So können wir endlich unsere Routine erstellen, indem wir alle unsere Aktivitäten zusammenstellen. Die Routine sollte aufgerufen werden, indem das Argument für die erste Funktion übergeben wird.

Hier ist die aufgeschlüsselte Ansicht der Compose-Funktion zur besseren Übersichtlichkeit.

// 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);
  };
}

Dieser Ansatz hat die folgenden Vorteile:

• Hilft bei der Verringerung der Umständlichkeit, die durch das Verschachteln mehrerer Funktionen verursacht wird.
• Lesbar und skalierbar