JavaScript Academy · Lektion

Funktionssammensætning

Kombinér små funktioner til pipelines.

Lektion 3 af 413 trin

Funktionssammensætning er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er funktionssammensætning?

Funktionssammensætning kombinerer små funktioner til én. Når f og g sættes sammen, dannes en funktion, hvor resultatet fra g bliver inddata til f.

Matematisk: compose(f, g)(x) = f(g(x)). Data flyder fra højre mod venstre.

To små funktioner

Sammensætning begynder med enkle funktioner med ét formål. Her er to transformationer, som vi kombinerer.

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

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

Sammensætning i hånden

Den mest eksplicitte sammensætning er blot at kalde den ene funktion med resultatet fra en anden. Læs den indefra og ud: increment køres først, derefter double.

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

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

En compose-funktion til to

Pak dette mønster ind i en genanvendelig compose. Den tager f og g og returnerer en ny funktion, der anvender g først og derefter 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));

Rækkefølgen betyder noget

Sammensætning er ikke kommutativ. compose(f, g) adskiller sig fra compose(g, f), fordi funktionen til højre køres 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 fra højre mod venstre

I compose(a, b, c)(x) evalueres kaldet som a(b(c(x))). Funktionen længst til højre behandler inddata først. Husk denne retning for at undgå fejl.

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

Sammensætning af teksttransformationer

Sammensætning er velegnet til tekstforløb: fjern omgivende mellemrum, konvertér til små bogstaver, og erstat derefter mellemrum; hvert trin er en lille 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  '));

Sammensætning med tal

At kæde matematiske operationer sammen er et klassisk eksempel. Hver funktion forbliver trivielt testbar for sig.

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

Hvorfor compose?

Sammensætning holder hver funktion fokuseret og genanvendelig og fjerner rod med indlejrede kald. I stedet for f(g(h(x))) spredt ud i din kode opbygger du ét navngivet forløb én gang og genbruger det.

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

Funktionssammensætning og currying sammen

Curried funktioner kan sættes smukt sammen, fordi hver af dem giver en funktion med ét argument, præcis det som sammensætning forventer.

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

Mod mange funktioner

Indtil nu håndterede compose to funktioner. Ægte sammensætning understøtter et vilkårligt antal funktioner. I næste lektion bygger du en generel compose og dens venstre-mod-højre-slægtning pipe ved hjælp af 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));

Hurtigt tjek

Hvis compose = (f, g) => x => f(g(x)), hvad returnerer compose(double, increment)(5), når double multiplicerer med 2, og increment lægger 1 til?

Besvar den i den interaktive lektion

Opsummering: funktionssammensætning

Du har lært at kombinere funktioner:

compose(f, g)(x) er lig med f(g(x)), evalueret fra højre mod venstre.
Rækkefølgen betyder noget: sammensætning er ikke kommutativ.
Sammensætning holder funktioner små, navngivne og genanvendelige.
Curried funktioner kan sættes rent sammen. Derefter generaliserer du til et vilkårligt antal funktioner.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Funktionssammensætning” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Funktionssammensætning”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Funktionssammensætning”?

Kombinér små funktioner til pipelines. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Funktionssammensætning”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy