JavaScript Academy · Les

Functiecompositie

Combineer kleine functies tot pipelines.

Les 3 van 413 stappen

Functiecompositie is een gratis JavaScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat is functiecompositie?

Functiecompositie combineert kleine functies tot één functie. Als je f en g samenstelt, ontstaat een functie waarbij de uitvoer van g de invoer van f wordt.

Wiskundig: compose(f, g)(x) = f(g(x)). Gegevens stromen van rechts naar links.

Twee kleine functies

Compositie begint met eenvoudige functies met één doel. Hier zijn twee transformaties die we gaan combineren.

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

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

Met de hand samenstellen

De meest expliciete vorm van compositie is gewoon de ene functie aanroepen met het resultaat van de andere. Lees dit van binnen naar buiten: increment wordt eerst uitgevoerd en daarna double.

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

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

Een compose-functie voor twee functies

Verpak dat patroon in een herbruikbare compose. Deze neemt f en g aan en retourneert een nieuwe functie die eerst g en daarna f toepast.

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

De volgorde is belangrijk

Compositie is niet commutatief. compose(f, g) verschilt van compose(g, f), omdat de rechterfunctie eerst wordt uitgevoerd.

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

Van rechts naar links lezen

In compose(a, b, c)(x) wordt de aanroep geëvalueerd als a(b(c(x))). De meest rechtse functie krijgt de invoer als eerste. Houd deze richting in gedachten om fouten te voorkomen.

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

Teksttransformaties samenstellen

Compositie is ideaal voor tekstverwerkingsketens: witruimte verwijderen, kleine letters gebruiken en daarna spaties vervangen, waarbij elke stap een kleine functie is.

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

Compositie met getallen

Wiskundige bewerkingen aan elkaar koppelen is een klassiek voorbeeld. Elke functie blijft afzonderlijk eenvoudig te controleren.

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

Waarom compose?

Compositie houdt elke functie doelgericht en herbruikbaar en verwijdert rommelige geneste aanroepen. In plaats van f(g(h(x))) verspreid door je code, bouw je één keer een benoemde verwerkingsketen die je opnieuw gebruikt.

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

Compositie en currying samen

Gecurryde functies laten zich prachtig samenstellen, omdat elke functie een functie met één argument oplevert, precies wat compositie verwacht.

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

Op weg naar veel functies

Tot nu toe verwerkte compose twee functies. Bij echte compositie worden willekeurig veel functies ondersteund. In de volgende les bouw je met reduce een algemene compose en de van links naar rechts werkende tegenhanger pipe.

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

Korte controle

Als compose = (f, g) => x => f(g(x)), wat retourneert compose(double, increment)(5) wanneer double met 2 vermenigvuldigt en increment 1 optelt?

Beantwoord dit in de interactieve les

Samenvatting: functiecompositie

Je hebt geleerd functies te combineren:

compose(f, g)(x) is gelijk aan f(g(x)), geëvalueerd van rechts naar links.
De volgorde is belangrijk: compositie is niet commutatief.
Compositie houdt functies klein, benoemd en herbruikbaar.
Gecurryde functies laten zich netjes samenstellen. Hierna generaliseer je dit naar een willekeurig aantal functies.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Functiecompositie” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Functiecompositie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Functiecompositie”?

Combineer kleine functies tot pipelines. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Functiecompositie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy