JavaScript Academy · Oppitunti

Funktioiden koostaminen

Yhdistäkää pieniä funktioita putkiksi.

Oppitunti 3/413 vaihetta

Funktioiden koostaminen on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä funktioiden koostaminen on?

Funktioiden koostaminen yhdistää pieniä funktioita yhdeksi. Kun f ja g koostetaan, tuloksena on funktio, jossa g:n tuloksesta tulee f:n syöte.

Matemaattisesti: compose(f, g)(x) = f(g(x)). Tieto kulkee oikealta vasemmalle.

Kaksi pientä funktiota

Koostaminen alkaa yksinkertaisista, yhteen tarkoitukseen keskittyvistä funktioista. Tässä on kaksi muunnosta, jotka yhdistämme.

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

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

Koostaminen käsin

Selkein tapa koostaa funktioita on kutsua yhtä funktiota toisen funktion tuloksella. Lukekaa lauseke sisältä ulospäin: increment suoritetaan ensin ja sitten double.

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

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

Kahden funktion compose-funktio

Käärikää tämä malli uudelleenkäytettävään compose-funktioon. Se ottaa vastaan f- ja g-funktiot ja palauttaa uuden funktion, joka soveltaa ensin g-funktiota ja sitten f-funktiota.

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

Järjestyksellä on merkitystä

Koostaminen ei ole kommutatiivista. compose(f, g) eroaa muodosta compose(g, f), koska oikeanpuoleinen funktio suoritetaan ensin.

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

Lukeminen oikealta vasemmalle

Muodossa compose(a, b, c)(x) kutsu evaluoituu muodossa a(b(c(x))). Oikeanpuoleisin funktio käsittelee syötteen ensin. Muistakaa tämä suunta virheiden välttämiseksi.

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

Merkkijonomuunnosten koostaminen

Koostaminen sopii erinomaisesti tekstiputkiin: poistetaan ympäröivät tyhjät merkit, muutetaan teksti pieniksi kirjaimiksi ja korvataan välilyönnit, niin että jokainen vaihe on pieni funktio.

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

Koostaminen lukujen kanssa

Matemaattisten operaatioiden ketjuttaminen on klassinen esimerkki. Jokainen funktio pysyy itsenäisesti erittäin helposti testattavana.

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

Miksi koostaa?

Koostaminen pitää jokaisen funktion rajattuna ja uudelleenkäytettävänä sekä poistaa sisäkkäisten kutsujen sekavuuden. Sen sijaan että f(g(h(x))) esiintyisi hajallaan koodissanne, rakennatte nimetyn putken kerran ja käytätte sitä uudelleen.

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

Koostaminen ja currying yhdessä

Currytetyt funktiot koostuvat kauniisti, koska jokainen niistä tuottaa yksittäisen argumentin funktion — juuri sellaisen, jota koostaminen odottaa.

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

Kohti useita funktioita

Tähän asti compose käsitteli kahta funktiota. Todellinen koostaminen tukee mitä tahansa funktioiden määrää. Seuraavassa oppitunnissa rakennatte yleisen compose-funktion ja sen vasemmalta oikealle toimivan vastineen pipe-funktion reduce-metodin avulla.

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

Pikatarkistus

Jos compose = (f, g) => x => f(g(x)), mitä compose(double, increment)(5) palauttaa, kun double kertoo luvun kahdella ja increment lisää siihen yhden?

Vastaa interaktiivisessa oppitunnissa

Kertaus: funktioiden koostaminen

Opitte yhdistämään funktioita:

compose(f, g)(x) on sama kuin f(g(x)), joka evaluoidaan oikealta vasemmalle.
Järjestyksellä on merkitystä: koostaminen ei ole kommutatiivista.
Koostaminen pitää funktiot pieninä, nimettyinä ja uudelleenkäytettävinä.
Currytetyt funktiot koostuvat siististi. Seuraavaksi yleistätte ratkaisun toimimaan millä tahansa funktioiden määrällä.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Funktioiden koostaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Funktioiden koostaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Funktioiden koostaminen”?

Yhdistäkää pieniä funktioita putkiksi. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Funktioiden koostaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy