JavaScript Academy · Lektion

Funktionskomposition

Kombinieren Sie kleine Funktionen zu Pipelines.

Funktionskomposition ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Was ist Funktionskomposition?

Funktionskomposition kombiniert kleine Funktionen zu einer einzigen. Die Komposition von f und g erzeugt eine Funktion, bei der die Ausgabe von g zur Eingabe von f wird.

Mathematisch: compose(f, g)(x) = f(g(x)). Daten fließen von rechts nach links.

Zwei kleine Funktionen

Komposition beginnt mit einfachen Funktionen, die jeweils nur eine Aufgabe erfüllen. Hier sind zwei Transformationen, die wir kombinieren werden.

const double = x => x * 2;
const increment = x => x + 1;

console.log(double(5));
console.log(increment(5));

Komposition von Hand

Die expliziteste Form der Komposition besteht einfach darin, eine Funktion mit dem Ergebnis einer anderen aufzurufen. Lesen Sie den Ausdruck von innen nach außen: increment wird zuerst ausgeführt, danach double.

const double = x => x * 2;
const increment = x => x + 1;

const result = double(increment(5));
console.log(result);

Eine compose-Funktion für zwei Funktionen

Kapseln Sie dieses Muster in eine wiederverwendbare Funktion namens compose. Sie nimmt f und g entgegen und gibt eine neue Funktion zurück, die zuerst g und anschließend f anwendet.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

const doubleThenAfterIncrement = compose(double, increment);
console.log(doubleThenAfterIncrement(5));

Die Reihenfolge ist wichtig

Komposition ist nicht kommutativ. compose(f, g) unterscheidet sich von compose(g, f), weil die rechte Funktion zuerst ausgeführt wird.

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const increment = x => x + 1;

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

Lesen von rechts nach links

In compose(a, b, c)(x) wird der Aufruf als a(b(c(x))) ausgewertet. Die Funktion ganz rechts verarbeitet die Eingabe zuerst. Behalten Sie diese Richtung im Blick, um Fehler zu vermeiden.

const compose = (f, g) => x => f(g(x));

const shout = s => s.toUpperCase();
const exclaim = s => s + '!';

const loud = compose(shout, exclaim);
console.log(loud('hello'));

Komposition von String-Transformationen

Komposition eignet sich hervorragend für Textverarbeitungsketten: trimmen, in Kleinbuchstaben umwandeln und anschließend Leerzeichen ersetzen – jeder Schritt ist eine kleine Funktion.

const compose = (f, g) => x => f(g(x));

const trim = s => s.trim();
const lower = s => s.toLowerCase();

const clean = compose(lower, trim);
console.log(clean('   HELLO World  '));

Komposition mit Zahlen

Das Verketten mathematischer Operationen ist ein klassisches Beispiel. Jede Funktion bleibt für sich genommen problemlos testbar.

const compose = (f, g) => x => f(g(x));

const square = x => x * x;
const negate = x => -x;

const negativeSquare = compose(negate, square);
console.log(negativeSquare(4));

Warum Komposition?

Komposition hält jede Funktion fokussiert und wiederverwendbar und beseitigt unübersichtliche verschachtelte Aufrufe. Statt f(g(h(x))) an vielen Stellen in Ihrem Code zu verteilen, erstellen Sie einmal eine benannte Pipeline und verwenden sie wieder.

const compose = (f, g) => x => f(g(x));

const toCents = d => Math.round(d * 100);
const addLabel = c => c + ' cents';

const priceLabel = compose(addLabel, toCents);
console.log(priceLabel(2.5));

Komposition und Currying zusammen

Curried Functions lassen sich hervorragend kombinieren, weil jede eine Funktion mit einem Argument liefert – genau das, was Komposition erwartet.

const compose = (f, g) => x => f(g(x));
const add = a => b => a + b;
const multiply = a => b => a * b;

const addThenDouble = compose(multiply(2), add(3));
console.log(addThenDouble(5));

Auf dem Weg zu vielen Funktionen

Bisher konnte compose zwei Funktionen verarbeiten. In der Praxis unterstützt Komposition beliebig viele Funktionen. In der nächsten Lektion erstellen Sie mit reduce ein allgemeines compose und sein Gegenstück pipe, das von links nach rechts arbeitet.

const compose = (f, g) => x => f(g(x));
const a = x => x + 1;
const b = x => x * 2;
const c = x => x - 3;

const combined = compose(a, compose(b, c));
console.log(combined(10));

Kurzer Test

Wenn compose = (f, g) => x => f(g(x)) gilt: Was gibt compose(double, increment)(5) zurück, wenn double mit 2 multipliziert und increment 1 addiert?

Zusammenfassung: Funktionskomposition

Sie haben gelernt, Funktionen zu kombinieren:

compose(f, g)(x) entspricht f(g(x)) und wird von rechts nach links ausgewertet.
Die Reihenfolge ist wichtig: Komposition ist nicht kommutativ.
Komposition hält Funktionen klein, benennt sie eindeutig und macht sie wiederverwendbar.
Curried Functions lassen sich sauber kombinieren. Als Nächstes verallgemeinern Sie das auf beliebig viele Funktionen.

Häufig gestellte Fragen

Ist die Lektion „Funktionskomposition“ kostenlos?

Ja — der vollständige Text von „Funktionskomposition“ 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 „Funktionskomposition“?

Kombinieren Sie kleine Funktionen zu Pipelines. 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 3 von 4.

Wie lange dauert die Lektion „Funktionskomposition“?

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