JavaScript

JAVASCRIPTIIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

Callback-funktiot ja klosuurit JavaScriptillä toteutettuna

Callback-funktiot

Yksi modernin JavaScriptin tärkeimmistä konsepteista ovat callback-funktiot. Yksinkertaistettuna callback tarkoittaa funktion välittämisestä argumenttina toiselle funktiona. Tämä on mahdollista, koska JavaScriptissä funktio itsessään on natiivi tietotyyppi. 


function sayHello(sName) {
    console.log('Hello ' + sName);
};

function greet (sName, fCallback) {
    fCallback(sName);
}

greet('Keijo', sayHello);   // tulostaa Hello Keijo

Callback-funktiot ovat erityisen hyödyllisiä silloin, kun haluamme suorittaa jonkin toiminnon vasta kun jokin muu toiminto on valmis. Tämä on erityisen tärkeää asynkronisessa ohjelmoinnissa, kuten tapahtumankäsittelijöissä, fetch/XHR-pyynnöissä, sekä funktionaalisessa ohjelmoinnissa.

Seuraavassa koodiesimerkissä hyödynnetään setTimeOut-funktiota viivästyttämään suoritusta ja tulostamaan data konsoliin kun määrätty viive on kulunut. Tämä callbackia hyödyntävä lähestymistapa on yleinen ratkaisumalli asynkronisisten operaatioiden käsittelyssä. 


function haeTiedot(callback) {
    setTimeout(() => {
        const data = "Tiedot haettu";
        callback(data);
    }, 1000);
}

haeTiedot(function(response) {
    console.log(response); // "Tiedot haettu"
});

Klosuurit

Toinen modernin JavaScriptin keskeinen käsite ovat klosuurit (closure). Klosuuri muodostuu, kun funktio palauttaa funktion, ja palautetulla funktiolla on pääsy ulompien funktioiden muuttujien arvoihin.

Seuraavassa esimerkissä laskeYhteensa()-funktio palauttaa toisen funktion, joka voi säilyttää ja päivittää summa-muuttujan arvon. Vaikka ulompi funktio on jo suoritettu, sisempi funktio voi silti käyttää ja muokata sen sisältämiä muuttujia klosuurin kautta: 


function laskeYhteensa() {
    let summa = 0;
    return function(luku) {
        summa += luku;
        console.log(summa);
    };
}

const summaFn = laskeYhteensa();
summaFn(5); // 5  - eli 0+5
summaFn(10); // 15  -- eli 5+10
summaFn(3); // 18  -- eli 15 + 3

Tämä mekanismi mahdollistaa monenlaisia käytännöllisiä ratkaisuja, kuten yksityisten muuttujien luomisen ja tilan ylläpitämisen funktioiden välillä, ilman altistumista globaalille näkyvyysalueelle.

Artikkelin tiedot

Otsikko: Callback-funktiot ja klosuurit JavaScriptillä toteutettuna

Kuvaus: Opi, mikä on callback-funktio ja miten klosuurit toimivat JavaScriptissä. Ymmärrä, miten funktiot kulkevat parametreina ja säilyttävät tilansa.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: