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.

Funktioiden kirjoittaminen JavaScriptissä

Vaikka JavaScript tarjoaa laajan valikoiman valmiita työkaluja ohjelmointiin, hyvin usein todellisessä kehitystyössä on tarve kirjoittaa omia funktioita. Funktio on pohjimmiltaan nimetty koodilohko, jonka suoritus voidaan käynnistää milloin tahansa kutsumalla sen nimeä. Koodin muuntaminen funktioksi on hyödyllistä aina, kun haluat toistaa saman toiminnon monta kertaa eri syötteillä.

Omat funktiot:

JavaScriptin funktiot voi määritellä kahdella pääasiallisella tavalla: funktiomäärittelynä (function declaration) tai funktioilmaisuina (function expressions).

Funktiomäärittely aloitetaan käyttämällä varattua termiä function, jota seuraa funktiolle on annettu selkeä ja yksilöllinen nimi.

Funktioilmaisussa nk. anonyymi funktio sijoitetaan muuttujaan. Funktioilmauksia käytetään erityisesti silloin, kun funktiota halutaan käyttää toisen funktion argumenttina (nk. callback) tai yhdessä muiden funktionaalisten ohjelmoinnin tekniikoiden kanssa.

Perinteinen funktiomäärittely function()-rakenteella

Funktion perusmäärittely on aina muotoa:


function funktionNimi(argumentit) {
    // funktion suoritettava koodi 
	return arvo; // palutetaan arvo
}

Esimerkiksi: 


function summa(a, b) {
  return a + b;
}

console.log(summa(2, 3)); // 5

Jos funktiolle ei välitetä argumentteja, sulkujen sisällä oleva argumenttilistaus jätetään tyhjäksi: 


function doIt() {
	console.log("just do it");
}
doIt();

Funktion kutsuminen

Funktio suoritetaan vasta silloin, kun sitä kutsutaan nimellä. Funktion kutsuminen tapahtuu syntaksilla: 


funktionNimi(argumentit);

Muuttujien näkyvyys funktiossa

Funktion toiminta rajataan aaltosulkeiden {...} sisään. Kaikki aaltosulkeiden sisällä oleva koodi kuuluu funktion suorituslohkoon. Funktion sisällä määritellyt muuttujat ovat nk. paikallisia muuttujia, eli ne ovat näkyvissä vain funktiolohkon sisällä. Voit lukea lisää muuttujien näkyvyysalueesta erillisessä artikkelissa.

Anonyymit funktiot

Anonyymi funktio on funktio, jolle ei ole annettu nimeä. Ne ovat hyödyllisiä silloin, kun tarvitset kertakäyttöisen ratkaisun, jota ei ole tarkoitus käyttää myöhemmin. Näissä tilanteissa anonyymia funktiota käytetään ensisijaisesti "kääreenä" ketjuttamaan useita toimintoja yhdeksi suoritettavaksi kokonaisuudeksi.

Alla kaksi hyvin yleistä käyttökohdetta anonyymeille funktioille: 


//  setTimeout käyttää anonyymiä funktiota suorittamaan toiminnon viiveellä.
setTimeout(function() {
    console.log("Tämä viesti tulee 2 sekunnin päästä");
}, 2000);



// tapahtumankäsittelijat hyödyntävät usein anonyymeja funktioita
document.getElementById("myButton").addEventListener("click", function() {
  alert("Painiketta klikattiin!");
});

Nuolifunktiot ovat moderni tapa määritellä funktioita

Nuolifunktiot (arrow functions) esiteltiin JavaScriptin ES6-standardissa. Ne ovat erittäin kätevä tapa lyhyiden funktioiden kirjoittamiseen entistäkin tiiviimmin. Useimmat modernit selaimet tukevat nuolifunktioita, mutta esimerkiksi Google Tag Manager ja lukuisat muut laajasti käytetyt työkalut eivät toistaiseksi hyväksy nuolifunktioiden avulla rakennettuja toimintoja.

Nuolifunktion määrittely perustuu aina funktioilmaisuun, eli funktio sijoitetaan muuttujaan. Sijoitus voi tapahtua var, let tai const määreellä luodulle muuttujalle. 


muuttujamäärittely = (argumentit => {
    // funktion suoritettava koodi 
	return arvo; // palutetaan arvo
};

Funktion sijoittaminen nimettyyn muuttujaan mahdollistaa sen, että funktioita voi käyttää muun muassa funktiomuuttujina, callbackeina ja muiden funktioiden parametreina. Seuraavassa esimerkissä console.log-menetelmälle välitetty arvo sisältää funktion: 


const summa = (a, b) => a + b;

console.log(summa(2, 3)); // 5

Anonyymi nuolifunktio

Perinteisen funktion tavoin myös nuolifunktio voi olla anonyymi: 


document.getElementById("myButton").addEventListener("click", () => {
  alert("Painiketta klikattiin!");
});

Yksinkertainen nuolifunktio

Jos nuolifunktio ei palauta arvoa ja sen suoritus on yksinkertainen, on kaarisulkeet mahdollista jättää kirjoittamatta: 


const summa = (a, b) => a + b;

console.log(summa(2, 3)); // 5

Oletusargumentit

Toinen ES6:n esittelemistä uusista piirteistä oli oletusargumentit. Niiden avulla funktion argumenteille on mahdollista määritellä oletusarvoja, siltä varalta että argumentti puuttuu. Oletusarvon sisältävät argumentit on määriteltävä funktion parametrilistassa ennen muita välitettäviä arvoja. Tämä pakotettu järjestys varmistaan sen, että JavaScriptin tulkki osaa käsitellä argumenttilistausta oikein.

Esimerkki: 


function greet(name = "World") {
  console.log("Hello, " + name);
}

greet(); // "Hello, World"
greet("Keijo"); // "Hello, Keijo"

Rest parametri (...) mahdollistaa tuntemattoman määrän funktion argumentteja

Rest-parametrin avulla funktiolle voi lähettää tuntemattoman määrän argumentteja ja käsitellä niitä taulukkona. Tämä ES6:n esittelemä piirre vähentää tarvetta vanhemmille, monimutkaisille ratkaisuille, kuten arguments-objektin käytölle.

Seuraavassa esimerkissa summaaKaikki()-funktio ottaa vastaan minkä tahansa määrän argumentteja ja laskee niiden summan. 


const summaaKaikki = (...luvut) => {
  return luvut.reduce((summa, luku) => summa + luku, 0);
};

console.log(summaaKaikki(1, 2, 3, 4)); // 10

Funktio vs. metodi - mikä on ero?

Metodit ja funktiot ovat läheisiä sukulaisia, mutta niillä on keskeinen ero: metodi on funktio, joka on sidottu olioon. Tämä sitominen mahdollistaa metodin pääsyn olion sisäisiin tietoihin - tyypillisesti this-avainsanaa käyttämällä.

Metodit määritellään samalla tavalla kuin tavalliset funktiot, mutta niitä kutsutaan olion kautta: 


Olio.metodi();

Artikkelin tiedot

Otsikko: Funktioiden kirjoittaminen JavaScriptissä

Kuvaus: Opi määrittelemään funktioita JavaScriptissä eri tavoin. Harjoittele nuolifunktioita, anonyymejä funktioita ja parametrien hallintaa.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: