JavaScript Academy · Lektion

pipe und compose erstellen

Implementieren Sie Komposition von links nach rechts und von rechts nach links.

pipe und compose erstellen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Von zwei Funktionen zu vielen

Ein compose mit zwei Argumenten ist einschränkend. In echten Pipelines werden viele Schritte miteinander verkettet. In dieser Lektion erstellen Sie mit reduce und reduceRight allgemeine Funktionen für compose und pipe.

pipe: von links nach rechts

pipe folgt der Ausführungsreihenfolge: Die erste Funktion wird zuerst ausgeführt. pipe(a, b, c)(x) entspricht c(b(a(x))). Die meisten Menschen empfinden das als natürlicher als compose.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(pipe(inc, double)(5));

Wie reduce pipe steuert

reduce beginnt mit dem Eingabewert als Akkumulator und wendet die Funktionen nacheinander an, wobei jedes Ergebnis an die nächste Funktion weitergegeben wird. Der Anfangswert x bildet den Start der Kette.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const steps = pipe(
  n => n + 1,
  n => n * 3,
  n => n - 2
);

console.log(steps(4));

compose mit reduceRight

compose ist pipe in umgekehrter Reihenfolge. Mit reduceRight wird die Funktionsliste vom Ende her durchlaufen, sodass die Funktion ganz rechts zuerst ausgeführt wird – passend zu f(g(x)).

const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

pipe und compose sind Spiegelbilder

Dieselbe Funktionsliste liefert in pipe und compose unterschiedliche Ergebnisse, weil die Richtung umgekehrt wird. Wählen Sie die Variante danach aus, wie Sie die einzelnen Schritte lesen möchten.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

const inc = n => n + 1;
const square = n => n * n;

console.log(pipe(inc, square)(3));
console.log(compose(inc, square)(3));

compose als umgekehrtes pipe

Sie können compose mithilfe von pipe definieren, indem Sie die Funktionsliste umkehren. Das zeigt, wie eng die beiden Funktionen miteinander verwandt sind.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => pipe(...fns.reverse());

const inc = n => n + 1;
const double = n => n * 2;

console.log(compose(inc, double)(5));

Eine echte Text-Pipeline

Erstellen Sie mit kleinen String-Funktionen und pipe einen Slug-Generator. Jeder Schritt erfüllt genau eine Aufgabe und lässt sich leicht unabhängig testen.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const slugify = pipe(
  s => s.trim(),
  s => s.toLowerCase(),
  s => s.replace(/\s+/g, '-')
);

console.log(slugify('  Hello World Example  '));

Komposition von Array-Operationen

Pipelines funktionieren mit jedem Datentyp, auch mit Arrays. Kombinieren Sie Filtern und Abbilden zu einer benannten Transformation.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const process = pipe(
  arr => arr.filter(n => n % 2 === 0),
  arr => arr.map(n => n * 10)
);

console.log(process([1, 2, 3, 4, 5, 6]));

Der Identitäts-Sonderfall

Der Aufruf von pipe() ohne Funktionen gibt die Eingabe unverändert zurück, weil reduce lediglich den Startwert zurückgibt. Dieses Identitätsverhalten macht die Helfer auch bei null Schritten sicher einsetzbar.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));

Kombinieren mit Currying

Curried und partiell angewendete Funktionen lassen sich direkt in Pipelines einsetzen. Jede wird zu einem klaren Schritt mit einem Argument.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const add = a => b => a + b;
const times = a => b => a * b;

const calc = pipe(add(3), times(2), add(-1));
console.log(calc(5));

pipe oder compose auswählen

Verwenden Sie pipe, wenn die Schritte von oben nach unten in Ausführungsreihenfolge lesbar sein sollen. Verwenden Sie compose, wenn Sie der mathematischen Schreibweise f(g(x)) entsprechen möchten. Beide sind einzeilige reduce-Wrapper und in funktionalen Bibliotheken allgegenwärtig.

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const normalize = pipe(
  s => s.trim(),
  s => s.replace(/[^a-z0-9]+/gi, ' '),
  s => s.toUpperCase()
);

console.log(normalize('  a-b_c!d  '));

Kurzer Test

Mit welcher Array-Methode führt compose Funktionen von rechts nach links aus?

Zusammenfassung: pipe und compose

Sie haben allgemeine Kompositionshelfer erstellt:

pipe verwendet reduce für die Ausführung von links nach rechts.
compose verwendet reduceRight für die Ausführung von rechts nach links.
compose kann als pipe mit einer umgekehrten Liste definiert werden.
Leere Pipelines verhalten sich wie die Identität, und Curried-Schritte lassen sich sauber einsetzen.

Häufig gestellte Fragen

Ist die Lektion „pipe und compose erstellen“ kostenlos?

Ja — der vollständige Text von „pipe und compose erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „pipe und compose erstellen“?

Implementieren Sie Komposition von links nach rechts und von rechts nach links. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „pipe und compose erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy