Funkcije v JavaScriptu

Funkcije v JavaScriptu uporabljamo takrat, ko želimo določeno opravilo zapisati enkrat in ga nato po potrebi večkrat poklicati. Funkcija lahko sprejme vhodne podatke prek parametrov, lahko pa tudi vrne rezultat z uporabo stavka return.

Osnovna pravila

• Funkcijo lahko definiramo z deklaracijo funkcije, funkcijskim izrazom ali puščično funkcijo.
• Parametri so imena, s katerimi funkcija sprejme vhodne podatke.
• Ob klicu funkcije se argumenti priredijo parametrom.
• Stavek return vrne rezultat in hkrati prekine izvajanje funkcije.
• Pri novi kodi pogosto uporabljamo const za shranjevanje funkcijskih izrazov in puščičnih funkcij.

Primerjave

Deklaracija funkcije

Deklaracija funkcije je osnovni in zelo pogost način zapisa funkcije. Zapišemo jo z rezervirano besedo function, imenom funkcije, morebitnimi parametri in telesom funkcije med zavitima oklepajema.

<p id="primer1"></p>
<script>
{
   function pozdrav() {
      document.getElementById("primer1").textContent = "Pozdravljeni!";
   }

   pozdrav();
}
</script>

Klic funkcije

Funkcijo pokličemo tako, da napišemo njeno ime in oklepaje. Če funkcija pričakuje argumente, jih zapišemo v oklepaje.

Parametri

Parametri omogočajo, da funkcija deluje z različnimi vhodnimi vrednostmi. V sodobnem JavaScriptu lahko določimo tudi privzete vrednosti parametrov.

<p id="primer2"></p>
<script>
{
   function pozdrav(ime = "obiskovalec") {
      document.getElementById("primer2").textContent = "Pozdravljen, " + ime + "!";
   }

   pozdrav("Janez");
}
</script>

return

Stavek return uporabimo takrat, ko želimo, da funkcija vrne rezultat. Ko JavaScript izvede return, se izvajanje funkcije konča.

<p id="primer3"></p>
<script>
{
   function izracunajVsoto(a, b) {
      return a + b;
   }

   document.getElementById("primer3").textContent = "Seštevek je " + izracunajVsoto(5, 10) + ".";
}
</script>

Če v funkciji uporabimo return brez vrednosti, funkcija vrne undefined. Tak zapis je uporaben tudi takrat, ko želimo funkcijo predčasno zaključiti.

Funkcijski izraz

Funkcijo lahko zapišemo tudi kot izraz in jo shranimo v spremenljivko ali konstanto. V sodobni kodi tak zapis pogosto shranimo v const.

<p id="primer4"></p>
<script>
{
   const kvadrat = function (x) {
      return x * x;
   };

   document.getElementById("primer4").textContent = "Kvadrat števila 6 je " + kvadrat(6) + ".";
}
</script>

Puščična funkcija

Puščična funkcija je krajši zapis funkcijskega izraza. Primerna je za kratke funkcije, vendar ni popolna zamenjava za vse druge oblike funkcij.

<p id="primer5"></p>
<script>
{
   const dvojnik = x => x * 2;

   document.getElementById("primer5").textContent = "Dvojnik števila 7 je " + dvojnik(7) + ".";
}
</script>

Doseg in spremenljivke v funkciji

Spremenljivke, deklarirane z let ali const znotraj funkcije, so lokalne za telo funkcije oziroma za ustrezen blok kode. V sodobni kodi se izogibamo ustvarjanju globalnih vezav brez jasne deklaracije.

<p id="primer6"></p>
<script>
{
   function izracunaj(a, b) {
      const vsota = a + b;
      return vsota;
   }

   document.getElementById("primer6").textContent = "Vsota je " + izracunaj(8, 12) + ".";
}
</script>

Priporočila

• Za pregledne in splošne funkcije pogosto uporabljaj deklaracijo funkcije.
• Pri funkcijskih izrazih in puščičnih funkcijah uporabljaj const, kadar vezave ne nameravaš ponovno prirediti.
• Za kratke funkcije razmisli o puščični funkciji, vendar le tam, kjer ne potrebuješ lastnega this.
• Za rezultate, ki jih želiš uporabiti drugje v programu, uporabi return.
• Pri parametrih po potrebi uporabi privzete vrednosti.

Pogoste napake

• Funkcija spreminja vsebino dokumenta, čeprav bi bilo bolj smiselno, da vrne rezultat z return.
• Pri klicu funkcije se uporabi ime spremenljivke, ki ni določena.
• Puščična funkcija se uporabi v primeru, kjer je pomembna lastna vezava this.
• Za lokalne spremenljivke v funkciji se uporablja starejši zapis z var, čeprav sta v sodobni kodi praviloma primernejša let in const.
• Po stavku return je zapisana koda, za katero se zmotno pričakuje, da se bo še izvedla.