JavaScript Academy · leksjon

Funksjonssammensetning

Kombiner små funksjoner til pipelines.

Leksjon 3 av 413 trinn

Funksjonssammensetning er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva er funksjonssammensetning?

Funksjonssammensetning kombinerer små funksjoner til én funksjon. Når De setter sammen f og g, får De en funksjon der resultatet fra g blir inndataen til f.

Matematisk: compose(f, g)(x) = f(g(x)). Data flyter fra høyre mot venstre.

To små funksjoner

Sammensetning starter med enkle funksjoner som har ett formål hver. Her er to transformasjoner som vi skal kombinere.

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

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

Manuell sammensetning

Den mest eksplisitte formen for sammensetning er å kalle én funksjon på resultatet fra en annen. Les uttrykket innenfra og ut: increment kjører først, deretter double.

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

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

En compose-funksjon for to

Pakk dette mønsteret inn i en gjenbrukbar compose-funksjon. Den tar f og g og returnerer en ny funksjon som bruker g først og deretter 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));

Rekkefølgen er viktig

Sammensetning er ikke kommutativ. compose(f, g) er forskjellig fra compose(g, f) fordi funksjonen til høyre kjører 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));

Lesing fra høyre mot venstre

I compose(a, b, c)(x) evalueres kallet som a(b(c(x))). Funksjonen lengst til høyre behandler inndataen først. Ha denne retningen i bakhodet for å unngå feil.

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

Sammensetning av strengtransformasjoner

Sammensetning egner seg svært godt for tekstpipelines: fjern mellomrom i begynnelsen og slutten, gjør teksten om til små bokstaver, og erstatt deretter mellomrom. Hvert trinn er en liten funksjon.

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

Sammensetning med tall

En kjede med matematiske operasjoner er et klassisk eksempel. Hver funksjon forblir enkel å teste isolert.

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?

Sammensetning holder hver funksjon fokusert og gjenbrukbar, og fjerner rot med nøstede kall. I stedet for å spre f(g(h(x))) rundt i koden kan De bygge en navngitt pipeline én gang og bruke den på nytt.

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

Sammensetning og currying sammen

Curried-funksjoner kan settes sammen på en elegant måte fordi hver av dem gir en funksjon med ett argument, akkurat det sammensetning 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));

Mot mange funksjoner

Så langt har compose håndtert to funksjoner. I reell sammensetning kan De bruke et hvilket som helst antall funksjoner. I neste leksjon skal De bygge en generell compose-funksjon og dens venstre-til-høyre-fetter pipe ved hjelp 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));

Kort kontroll

Hvis compose = (f, g) => x => f(g(x)), hva returnerer compose(double, increment)(5) når double multipliserer med 2 og increment legger til 1?

Besvar den i den interaktive leksjonen

Oppsummering: funksjonssammensetning

De har lært å kombinere funksjoner:

compose(f, g)(x) er lik f(g(x)), evaluert fra høyre mot venstre.
Rekkefølgen er viktig: sammensetning er ikke kommutativ.
Sammensetning holder funksjonene små, navngitte og gjenbrukbare.
Curried-funksjoner kan settes sammen på en ryddig måte. Neste steg er å generalisere til et hvilket som helst antall funksjoner.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Funksjonssammensetning» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Funksjonssammensetning», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Funksjonssammensetning»?

Kombiner små funksjoner til pipelines. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Funksjonssammensetning»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy