JavaScript Academy · Lektion

Funktionskomposition

Kombinera små funktioner till pipelines.

Lektion 3 av 413 steg

Funktionskomposition är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad är funktionskomposition?

Funktionskomposition kombinerar små funktioner till en. När f och g komponeras skapas en funktion där resultatet från g blir indata till f.

Matematiskt: compose(f, g)(x) = f(g(x)). Data flödar från höger till vänster.

Två små funktioner

Komposition börjar med enkla funktioner som har ett enda syfte. Här är två transformationer som vi ska kombinera.

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

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

Komposition för hand

Den tydligaste formen av komposition är att helt enkelt anropa en funktion med resultatet från en annan. Läs uttrycket inifrån och ut: increment körs först och därefter double.

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

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

En compose-funktion för två funktioner

Omslut det mönstret i en återanvändbar compose-funktion. Den tar f och g och returnerar en ny funktion som tillämpar g först och därefter f.

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

Ordningen spelar roll

Komposition är inte kommutativ. compose(f, g) skiljer sig från compose(g, f), eftersom funktionen till höger körs först.

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

Läsning från höger till vänster

I compose(a, b, c)(x) utvärderas anropet som a(b(c(x))). Funktionen längst till höger bearbetar indata först. Ha denna riktning i åtanke för att undvika buggar.

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 av strängtransformationer

Komposition passar utmärkt för textpipeline: trimma, gör om till gemener och ersätt sedan mellanslag, där varje steg är en liten 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 med tal

Att kedja matematiska operationer är ett klassiskt exempel. Varje funktion förblir enkel att testa separat.

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

Varför komponera?

Komposition håller varje funktion fokuserad och återanvändbar och tar bort röran med nästlade anrop. I stället för att sprida f(g(h(x))) genom koden bygger Du en namngiven pipeline en gång och återanvänder den.

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 och currying tillsammans

Currierade funktioner komponeras på ett elegant sätt, eftersom varje sådan funktion ger en funktion med ett argument – exakt vad komposition förväntar sig.

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

Mot många funktioner

Hittills har compose hanterat två funktioner. Vid verklig komposition stöds valfritt antal funktioner. I nästa lektion får Du bygga en generell compose och dess vänster-till-höger-motsvarighet pipe med hjälp av reduce.

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

Snabb kontroll

Om compose = (f, g) => x => f(g(x)), vad returnerar compose(double, increment)(5) när double multiplicerar med 2 och increment adderar 1?

Besvara frågan i den interaktiva lektionen

Repetition: Funktionskomposition

Du har lärt Dig att kombinera funktioner:

compose(f, g)(x) är lika med f(g(x)), utvärderat från höger till vänster.
Ordningen spelar roll: komposition är inte kommutativ.
Komposition håller funktionerna små, namngivna och återanvändbara.
Currierade funktioner komponeras på ett smidigt sätt. Nästa steg är att generalisera till valfritt antal funktioner.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Funktionskomposition” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Funktionskomposition”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Funktionskomposition”?

Kombinera små funktioner till pipelines. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Funktionskomposition”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy