Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

JavaScript-kielen funktiot (alkeet - osa 4)

Funktiot ovat aliohjelmia, joiden avulla voimme pakata toiminnallisuutta myöhemmin ja/tai uudelleen käytettäväksi. Tässä oppaassa olemme jo käyttäneetkin kielen ja ympäristön sisäänrakennettuja funktioita. Esimerkiksi aritmeettiset operaattorit ja dokumenttiolion write-metodi ovat funktioita, vaikka kutsumme niitä luonteittensa mukaisesti eri nimillä. Luomalla omia funktioita, voimme myös estää tarpeetonta koodin toistoa ja jakaa ohjelmia pienempiin modulaarisempiin ja helpommin hallittaviin kokonaisuuksiin.

Sisällysluettelo

  1. Funktioilmoitus
    1. Funktioilmoituksen syntaksi
    2. Funktioilmoituksen yksinkertainen koodiesimerkki
  2. Funktion kutsu
  3. Funktion parametrit ja argumentit
  4. Funktion paluuarvo
    1. Esimerkki paluuarvolla
    2. Esimerkki paluuarvon käytöstä
  5. Funktiolausekkeet
    1. Funktiolauseke-esimerkki 1 - muuttujan alustaminen funktiolla
    2. Funktiolauseke-esimerkki 2 - välittömästi kutsuttava funktiolauseke

Funktioilmoitus

Samoin kuin muuttujat, funktiotkin on esiteltävä ennen kuin niitä voidaan käyttää. Funktioilmoituksilla on myös samat nimeämiskäytännöt ja näkyvyysalueet kuin muuttujilla.

Funktioilmoituksen syntaksi

Funktioilmoituksen syntaksi on seuraavanlainen:

function funktioNimi(/*parametriluettelo*/) {// funktion runko alkaa

  /* Suoritettava(t) lause(et) */
  
}// funktion runko päättyy

Funktioilmoitus siis alkaa function-avainsanalla, jota seuraa:

  1. funktioNimi - ohjelmoijan nimeämä tunniste funktiolle
  2. () - kaarisulut, joiden sisälle valinnaisia (0 - 255) pilkulla erotettuja parametreja (funktiolle kutsuttaessa välitettäviä tietoja)
  3. {} - aaltosulut, joiden sisälle funktion runko, eli funktion toiminnallisuus

Funktioilmoituksen yksinkertainen koodiesimerkki

Seuraavassa esittelemme yksinkertaisen funktioesimerkin, jota kutsuttaessa hälyyttää tervehdyksellä:

var tervehdittävä = "maailma";//muuttujalla globaali näkyvyysalue
function tervehdi() {
  window.alert('Hei ' +  tervehdittävä + '!');
}

Yksinkertaisuuden vuoksi, tässä funktion käyttämä tieto tulee ulkopuolisesta muuttujasta, joten parametriluettelo jää tyhjäksi.

Funktion kutsu

Oppaan edelliset koodiesimerkit suoritettiin heti, kun koodi osui kohdalle. Nyt tervehdi-funktio on ilmoitettu, mutta mitään tervehdystä ei näy, sillä funktiot ladataan muistiin eikä niitä ajeta ennen kuin niitä kutsutaan. Funktiot suoritetaan kutsumalla niitä nimellä ja parametriluettelolla.

Ilmoitettua funktioita voidaan kutsua lukemattomia kertoja ja mistä tahansa sen näkyvyysalueelta. Esimerkin vuoksi yhdistämme tervehdi-funktion kutsun painikkeeseen:

<button onclick="tervehdi();">Kutsu tervehdi-funktiota</button>

Joka tulostuu dokumenttiin seuraavasti:

Funktion parametrit ja argumentit

Funktioista saadaan huomattavasti monikäyttöisempiä välittämällä niille tietoja. Funktiokohtaisia tietoja ovat:

parametrit
Funktioilmoituksessa ohjelmoijan nimeämiä tunnisteita funktioille välitettävistä tiedoista, eli funktiokohtaisia muuttujia.
argumentit
Funktiokutsussa parametreille välitettävät tiedot, eli funktiokohtaisten muuttujien arvot.

Seuraavassa ilmoitamme funktion yhdellä parametrilla:

function tervehdiNimellä(tervehdittävä) {
  window.alert('Hei ' +  tervehdittävä + '!');
}

Nyt tervehdiNimellä-funktiomme odottaa kutsua yhdellä argumentilla, joka välitetään sille funktiota kutsuttaessa. Argumentti voi olla perustietotyyppi, muuttuja, tai olio, kuten vaikkapa toinen funktio. Esimerkin vuoksi luomme kolme kutsua erilaisilla argumenteilla:

<ul>
<li><button onclick="tervehdiNimellä('Matti');">Argumenttina merkkijono.</button></li>
<li><button onclick="tervehdiNimellä(tervehdittävä);">Argumenttina aiemmin määrittämämme globaali muuttuja.</button></li>
<li><button onclick="tervehdiNimellä();">Argumentti unohtui kutsusta!</button></li>
</ul>

Luettelomme tulostuu dokumenttiin seuraavasti:

Parametrimme on siis erityinen muuttuja, jota käytetään viittaamaan johonkin kutsuvaiheessa syötettyyn tietoon, jolloin se saa arvonsa. Tämä havainnollisttuu erityisesti viimeisessä kutsussa, josta nähdään että muuttuja kyllä löytyy, mutta sen arvoa ei oltu määritetty.

Funktion paluuarvo

Tietojen vastaanoton lisäksi funktiota voidaan pyytää myös palauttamaan tietty ohjelmoijan määrittämä arvo return-lauseella. Edellisissä esimerkeissä emme pyytäneet funktioilmoituksissa paluuarvoa, jolloin JS-käsittelijä palautti hiljaisesti ja näkymättömästi undefined-arvon.

Esimerkki paluuarvolla

Seuraavassa ilmoitamme funktion kahdella parametrilla, pyydämme sitä eksplisiittisesti palauttamaan arvon, sekä kutsumme sitä samantien:

function ketjutaNimet(etunimi,sukunimi) {//luettelon alkiot erotetaan pilkulla
  tervehdittävä = etunimi + " " + sukunimi;//muutamme aiemman muuttujan arvoa
  return tervehdittävä;//palautetaan muuttujan arvo
}
ketjutaNimet('Matti','Meikäläinen');//vastaavasti kutsussa argumentit erotetaan pilkulla

Tässä funktiomme siis vastaanottaa kutsuttaessa kaksi argumenttia, ketjuttaa ne, tallentaa ketjutuksen globaaliin muuttujaan, sekä palauttaa muuttujan kutsuvalle koodille jatkokäsittelyä varten. Käytämme tätä paluuarvoa myöhemmin.

Huomioi että return-lause aina katkaisee funktion suorituksen siihen, vaikka rungossa olisikin sen jälkeistä suorittamatonta koodia. Tällöin return-lausetta tarvitaan kahdenlaisissa tapauksissa:

Esimerkki paluuarvon käytöstä

Seuraavassa käytämme edellä ilmoitettuja funktioita:

Kutsumme tervehdiNimellä-funktiota, jolle annamme argumentiksi ketjutaNimet-funktion omilla merkkijono-argumenteillaan:

<button onclick="tervehdiNimellä(ketjutaNimet('Matti','Meikäläinen'));">Argumenttina funktio!</button>

Tämä tulostuu dokumenttiin seuraavasti:

Funktiolausekkeet

Funktioita voidaan määrittää myös lausekkeina. Funktiolausekkeen tunnistaa siitä, ettei se ala function-avainsanalla. Useimmiten funktiolausekkeet ovat myös anonyymeja, eli niissä ei esiinny tunnistetta, eli funktioNimeä. Tärkein käytännön ero funktioilmoitukseen on kuitenkin siinä, ettei funktiolauseketta nosteta näkyvyysalueensa alkuun, joten sitä ei voida käyttää ennen sen määrittelyä.

Funktiolauseke-esimerkki 1 - muuttujan alustaminen funktiolla

Vertailun vuoksi seuraavassa koodiesimerkit samasta toiminnallisuudesta, ensimmäinen ilmoituslauseena, toinen sijoituslausekkeena:

/*Funktioilmoitus, alkaa function-avainsanalla:*/
function tervehdi() {// funktiolla on nimi
  window.alert('Hei ' +  tervehdittävä + '!');
}
//Kutsu funktion tunnisteella: tervehdi();

/*Funktiolauseke, ei ala function-avainsanalla:*/
var moikkaa = function() {// anonyymi funktio
                window.alert('Hei ' +  tervehdittävä + '!');
              }
//Kutsu muuttujan tunnisteella: moikkaa();

Tässä esimerkissä funktion sijoittaminen muuttujaan on mahdollista koska funktiomäärittely sijaitsee kohdassa, jossa JS-käsittelijä odottaa lauseketta, toisin kuin funktiolauseessa, joka siis aina alkaa function-avaisanalla.

Funktiolauseke-esimerkki 2 - välittömästi kutsuttava funktiolauseke

Yleisin tapa luoda funktiolauseke on sisällyttää funktio kaarisulkuihin, sillä JS-käsittelijä odottaa aina lauseketta kohdatessaan avaavan kaarisulun. Tällaiset funktiolausekkeet myös kutsutaan välittömästi:

(function() {/*funtion runko*/})(/*kutsu*/);
Osmo Saarikumpu

yksi taso ylös