JavaScript függvények, eljárások, metódusok (JS függvény fogalma, létrehozása, meghívása)

Ezen cikkünkben a JavaScript-ben használatos függvényekkel, eljárásokkal, metódusokkal fogunk megismerkedni. Elmagyarázzuk, hogy mi a különbség a három kifejezés között, létrehozunk paraméteres és paraméter nélküli függvényeket, illetve meghívjuk őket. Mindennek mutatjuk a szintaktikáját, illetve példákat is hozunk minden elméletre.

Mi a különbség a függvény és az eljárás között?

Nagyon leegyszerűsítve a legfontosabb különbség a függvények és az eljárások között az az, hogy eljárásoknak nincs visszatérési értékük, míg a függvényeknek van.

A programozásban nagyon gyakran használják ezt a két kifejezést szinonimaként, sőt még metódusként, szubrutinként vagy alprogramként is szoktak hivatkozni rájuk.

Szerencsére a JavaScript-ben szintaktikailag nincs semmilyen különbség a függvények és az eljárások között, így nem kell azon stresszelnünk, hogy most melyiket használjuk, illetve azon, hogy hogyan valósítsuk meg azt programozás szempontjából.

A továbbiakban – ha nem jelöljük külön -, akkor mi is szinonimaként fogjuk függvény, eljárás és metódus kifejezéseket.

Mi az a függvény és eljárás?

A programozás során a függvény (és az eljárás is) egy nagyobb program forráskódjának a része, amely egy adott feladatot hajt végre, a kód többi részétől függetlenül. Óriási előnye, hogy egy függvény, eljárás által tárolt kódrészlet többször felhasználható anélkül, hogy ugyanazokat a kódsorokat újból és újból le kellene írnunk.

Egy példán keresztül úgy tudnánk szemléltetni, hogy ha írunk egy számológép programot, amelyben vannak különböző műveletek, akkor nem kell minden egyes összeadásnál újból megírnunk az összeadás programkódját. Elegendő egyetlen egyszer megírni, majd minden egyes összeadásnak csak azt az egyetlen egyszer megírt összeadást tartalmazó függvényt fogjuk meghívni.

Egy függvény csak akkor kerül végrehajtásra, ha azt meghívjuk. Szóval ha megvalósítunk egy függvényt, amelyet később sehol sem hívunk meg, akkor az nem fog lefutni a programunk futása során.

Miért érdemes függvényeket használni?

A legfontosabb érv a függvények használata mellett az újrahasznosíthatóság, mint ahogy fentebb is említettük elég egy kódrészletet, egy feladatot elvégző alprogramot csak egyetlen egyszer megírnunk és azt a későbbiekben többször is feltudjuk használni.

Nem csak saját magunkon segítünk azzal, hogy időt spórolunk, mivel nem kell fölöslegesen pocsékolni az időt olyan dolgokra, amiket már egyszer megcsináltunk, hanem a programunknak, vagy jelen esetben weboldalunknak is jót teszünk vele. Hiszen minél kevesebb JavaScript kódot írunk a weboldalunk mérete annál kisebb lesz, ebből kifolyólag a weboldalunk gyorsabban fog futni és gyorsabban fog betölteni.

JavaScript függvény létrehozása

A JavaScript nyelvben egy függvényt a „function” kulcsszóval hozunk létre, mely után el kell neveznünk az eljárásunkat. A név után egy „()” (nyitó- és zárójel) párral kell jelölnünk, hogy most egy függvény következik. A két zárójel közé opcionálisan kerülhetnek paraméterek, de ezekről majd később. Majd ezek után következik egy nyitó-és záró kapcsos zárójel, amely közé a függvényünk meghívásakor lefutó programkód kerül.

Nézzük meg, hogy milyen szabályok vonatkoznak egy JS függvény elnevezésére:

a függvény nevének kötelező egyedinek lennie
a függvénynévnek kötelező minimum 1 karakterből állnia, de akár többől is állhat
a függvény neve tartalmazhat karaktereket, számokat, aláhúzásokat és dollárjeleket
a függvény neve csak karakterrel, aláhúzással vagy dollárjellel kezdődhet, számmal nem
a nevek kis- és nagybetű érzékenyek (szóval a “JS” és a “js” két különböző függvény)

Szintaktika

function NÉV(OPCIONÁLIS.PARAMÉTEREK) {
    //ide jön a programkód
}
Code language: JavaScript (javascript)

Fentebb már volt róla szó, hogy vannak opcionális paraméterek, amelyek a zárójelbe kerülnek, ezek olyan értékek, amelyeket átadhatunk a függvénynek, hogy a függvény belsejében dolgozzon velük.

Például ha írtunk egy összeadás függvényt, akkor a két átadott paraméter a két összeadni kívánt szám.

Természetesen írhatunk olyan függvényt is, amelynek paraméter nélküli, illetve olyat is, ami egy, vagy akár több, mint két paramétert tartalmaz. A paraméterek számát mindig az adott feladat határozza meg.

Paraméter nélküli példa

JavaScript kód

<script>
     function fuggveny() {
        alert("Meghívtam egy függvényt.");
     }
</script>
Code language: HTML, XML (xml)

A fenti példa egy paraméter nélküli eljárást (és most szó szerint egy eljárást) hívatott bemutatni, hiszen nincs visszatérési értéke.

Paraméteres példa

JavaScript kód

<script>
     function osszead(szam1, szam2) {
        return szam1+szam2;
     }
</script>
Code language: HTML, XML (xml)

Ez a példa pedig valóban egy függvényt hoz létre, hiszen van visszatérési értéke. Azt, hogy van visszatérési értéke azt a „return„-ból tudjuk. A „return” után található részt adja vissza, de erről is majd később ejtünk bővebben szót.

Függvény visszatérési értéke

Egy függvény visszatérési értékének nevezzük azt az értéket, amelyet a metódusunk ad vissza a meghívását követően. Ha a függvényünk eléri a „return” kifejezést, akkor nem fut tovább, a függvény futása leáll és visszaadja a „return„-ban meghatározott értéket. Ez az érték lehet egy konkrét szám, karakter, szöveg is, de a legtöbb esetben valamilyen objektum vagy változó.

Például, ha írunk egy összeadásra alkalmas függvényt, melynek két paramétere van, akkor a függvényben összeadjuk a két számot és csak az eredményt adjuk vissza.

Mivel akár egy függvényben is elhelyezhetünk egy újabb függvényt, ezért fontos tisztáznunk, hogy mi történik abban az esetben, ha a függvényünkben lévő függvény (azaz a belső függvény) éri el a „return„-ját. Természetesen ebben az esetben csak a belső függvény futása ér véget, az első (külső) függvény a belső függvény meghívását létrehozó sor után folytatódik. Amely egyszer természetesen ugyanúgy eléri a saját „return” kifejezését, ahol ez a függvény is véget ér.

Szintaxis

function NÉV(OPCIONÁLIS.PARAMÉTEREK) {
    //ide jön a programkód
    return ÉRTÉK;
}
Code language: JavaScript (javascript)

A „return” kulcsszó után kell megadnunk azt, hogy mit szeretnénk visszaadni. Például az alábbi példában a két szám összegét.

Példa

JavaScript kód

<script>
     function osszead(szam1, szam2) {
        return szam1+szam2;
     }
</script>
Code language: HTML, XML (xml)

Függvény meghívása

A függvényünkben található kód csak akkor fog lefutni, ha azt meghívjuk. Amíg a függvényünket nem hívtuk meg, addig az eljárásban található kódrészlet érintetlen marad. A böngésző nem is fogja elolvasni, figyelmen kívül hagyja teljes mértékben. Ezért szükséges az, hogy meghívjuk a függvényünket, amikor használni szeretnénk.

Ez a meghívás többféleképpen is történhet:

meghívjuk gombnyomásra (onclick)
meghívhatjuk egyszerűen JavaScript kódból
meghívhatja saját magát is

Egy függvény meghívásához nincs semmire sem szükségünk, csak arra, hogy tudjuk milyen néven szerepel a programunkban a meghívni kívánt JS függvény.

Szintaxis

FÜGGVÉNYNÉV(OPCIONÁLIS.PARAMÉTEREK);
Code language: JavaScript (javascript)

Példa

JavaScript + HTML kód

<!DOCTYPE html>
  <html>
    <body>
       A két szám összege: <p id="szoveg"></p>

       <script>
         function osszead(szam1, szam2) {
           return szam1 + szam2;
         }
         document.getElementById("szoveg").innerHTML = osszead(3, 4); //itt történik a meghívás
       </script>

     </body>
  </html>
Code language: HTML, XML (xml)

Eredmény

A két szám összege:

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A függvény visszatérési értékét egyenesen betöltjük a „szoveg” ID-val rendelkező elem helyére.

Helyi változók

Helyi változóról akkor beszélhetünk, ha a függvényen belül hozunk létre egy változót. Ebben az esetben a létrehozott változó csak a függvényen belül fog élni, azaz csak onnan lesz elérhető, más függvényekből, vagy a függvényen kívülről nem fogunk tudni hivatkozni rá.

Mivel a helyi változók csak a saját függvényükön belül érhetők el, így létezhet ugyanolyan elnevezéssel több változó is, de fontos, hogy külön függvényekben legyenek elhelyezve.

Mivel ezek a változók csak a függvényen belül léteznek, így akkor jönnek létre amikor meghívjuk a függvényt, amikor a függvényünk lefut, akkor ezek a változók meg is szűnnek.

Szintaxis

function VÁLTOZÓNÉV(OPCIONÁLIS.PARAMÉTEREK) {
    var/let/const = ÉRTÉK;
}
Code language: JavaScript (javascript)

Példa

//itt nem érem el az "eredmeny" helyi változót

function osszead(szam1, szam2) {
    var eredmeny = szam1+szam2;
    alert(eredmeny); //itt elérem az "eredmeny" helyi változót
}

//itt nem érem el az "eredmeny" helyi változót
Code language: JavaScript (javascript)