Függvény, eljárás: Mindkettőre igaz, hogy egy adott kódrészletnek adunk azonosítót, (nevet) és ennek segítségével tudjuk a későbbiekben a függvényt, eljárást lefuttatni. Akár többször is. Akár különböző paraméterekkel. A függvények, eljárások javítják a kód áttekinthetőségét, újra felhasználhatóságát. Királyság! Mi a különbség a függvény és az eljárás között? A függvényeknek van visszatérési értékük, az eljárásoknak meg nem! Tehát a függvényben van return, erről könnyű felismerni.
JS függvény általános formája
|
1 2 3 4 |
function fvnev(par1, par2) { utasítások; return visszatérési érték; } |
Javascriptnél a függvényeknél nem kell megadni sem a paraméterek típusát, sem a visszatérési érték típusát. A függvényeket a function kulcsszóval adjuk meg, az utasításokat utasításblokkba helyezzük, a visszatérési értéket a return utasítás után adjuk meg. A függvény meghívása a függvény nevével történik megadva utána zárójelben a paraméterek aktuális értékét. Híváskor a zárójel akkor is kötelező, ha nincsenek aktuális paraméterek. A paraméterek és a visszatérési érték is tetszőleges elemi vagy összetett érték lehet. A paraméternek lehet adni alap értéket is, pl: function fvnev(par1, par2 = 2)
Példa: számoljuk ki egy szám négyzetét!
|
1 2 3 4 5 |
function negyzet(x) { return x * x; } let eredmeny = negyzet(3); console.log(eredmeny); // Kiírja a függvény eredményét a konzolra (9) |
A függvényt a nevével hívhatjuk meg, paraméternek pedig egy számot adtam meg, ennek a négyzetét fogja kiszámolni. Mit fog eredményül adni? negyzet(negyzet(negyzet(2)))); ?
A függvénynek megadhatok változót is paraméterként:
var szam=2;
negyzet(szam); // a szam változónak a négyzetét számolja ki
Változók láthatósága
A függvényen kívül deklarált változók globális változók lesznek. Globális változók bárhonnan elérhetőek. Lokális változók: a függvényen belül deklarált változók a függvényre nézve lokálisak lesznek. Ha függvényen belül elhagyjuk a var kulcsszót, akkor viszont globális változó jön létre. Mivel a globális változók használata könnyen hibához vezethet, ezért próbáljuk meg számukat minimalizálni.
példa: szökőév-e az adott év?
A következő példában 2db eljárást is létrehoztam. Az egyik csak egy kiiratás, a másik megvizsgálja, hogy egy adott szám szökőév-e. A visszatérési értéke igaz vagy hamis. Ezt vizsgáljuk meg egy if segítségével. Ha igaz, akkor az s változó üres lesz, ha hamis akkor marad az értéke ‘NEM’. Az ‘ir’ függvénnyel pedig kiíratjuk a végeredményt.
|
1 2 3 4 5 6 7 8 9 10 11 |
function ir (s) { // eljárás neve, paraméter document.write(s,'<br>'); } function szokoev(a) { return ((a % 4 == 0 && a %100!=0) || a % 400 == 0); } var ev = 2001; var s = ' NEM '; if (szokoev(ev)) { s = ''} ir(ev+' év'+s+'szökőév.' ); |
Itt is használhatok szöveg bekérést:
var ev;
ev = prompt(‘Évszám:’);
példa: elektromos ellenállás kiszámítása megadott paraméterek alapján.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function ir (s) { // eljárás neve, paraméter document.write(s,'<br>'); } function vez_ellenallas(d, l, ro) { var A = d*d*Math.PI/4; // a vezeték keresztmetszete mm^2 var R = ro*l/A; //ellenállás képlete return R; } var d = 0.1; // a vezeték átmérője (mm) var l = 200; // a vezeték hossza (m) var ro = 0.0175; // a réz fajlagos ellenállása Ohm*mm^2/m var ohm = vez_ellenallas(d, l, ro); //függvény meghívása a paraméterekkel ir(d+'mm átm., '+l+'m hosszú rézvezeték ellenállása='+ohm+'Ohm.'); |
Feladat: kör adatainak kiszámítása. Mindegy, hogy a felhasználó a kör sugarát, kerületét, területét adja-e meg!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<html> <head></head> <body> <form class='sikidom' name='kor'> <h4> A kör </h4> <b>Adatok:</b><br> <span>A kör sugara: </span> <input name='r' size=7 onfocus=' torol(); ' onblur=' korszamol(1); '> cm <br> <span>A kör kerülete: </span> <input name='K' size=7 onfocus=' torol(); ' onblur=' korszamol(2); '> cm <br> <span>A kör területe: </span> <input name='T' size=7 onfocus=' torol(); ' onblur=' korszamol(3); '> cm<sup>2</sup> <br><br> <!-- onfocus : az az esemény, amikor belekattintunk a mezőbe (megkapja a fókuszt) onblur : az az esemény, amikor kikattintunk a mezőből (elveszti a fókuszt) --> <input type=button value='Számol'> </form> <!-- -- -- JavaScript függvény megvalósítása -- -- --> <script> function torol() { document.kor.r.value = "" document.kor.K.value = "" document.kor.T.value = "" } function korszamol(m) { r = parseFloat(document.kor.r.value) K = parseFloat(document.kor.K.value) T = parseFloat(document.kor.T.value) //ha a felhasználó a kör sugarát ajda meg, ebből számolunk if( m==1 && r>0 ) { K = 2*r*Math.PI T = r*r*Math.PI // 3 számjegyre keretítünk document.kor.K.value = Math.round(K*1000)/1000 document.kor.T.value = Math.round(T*1000)/1000 } //ha a felhasználó a kör kerületét adja meg, abból számolunk if( m==2 && K>0 ) { r = K/2/Math.PI //kerületből kiszámoljuk a kör sugarát T = r*r*Math.PI // 3 számjegyre keretítünk document.kor.r.value = Math.round(r*1000)/1000 document.kor.T.value = Math.round(T*1000)/1000 } //ha a felhasználó a kör területét adja meg, abból számolunk if( m==3 && T>0 ) { r = Math.sqrt(T/Math.PI) //területből kiszámoljuk a kör sugarát K = 2*r*Math.PI // 3 számjegyre keretítünk document.kor.r.value = Math.round(r*1000)/1000 document.kor.K.value = Math.round(K*1000)/1000 } } </script> <!-- -- -- -- JavaScript függvény vége -- -- -- -- --> </body> </html> |
Az anonim függvények, arrow functions
Az anonim függvények olyan függvények, amelyeknek nincs nevük. Ezek a függvények közvetlenül használhatók, anélkül hogy el kellene őket nevezni. Az anonim függvényeket gyakran használják callback függvényekként, ahol egy másik függvény argumentumaként kerülnek átadásra. Az első példában egy változóhoz rendelünk egy névtelen függvényt. A második példában a setTimeout() függvénynek adunk egy anonim függvényt, ami a konzolra kiírja a szöveget. Az anonim függvényeknek is lehet adni paraméter(t)eket), illetve alapértelmezett értéket!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// Anonim függvény változóhoz rendelve let anonimFgv = function () { console.log("Ez egy anonim függvény!"); }; anonimFgv(); // anonim függvény alapértelmezett paraméterrel let anonimFgvPara = function (nev = "Vendég") { console.log(`Hello, ${nev}!`); }; anonimFgvPara(); // Hello, Vendég! anonimFgvPara("Viktor"); // Hello, Viktor! // anonim függvény több alapértelmezett paraméterrel let osszeadas = function (a = 1, b = 2) { return a + b; }; console.log(osszeadas()); // Kiírja: 3 (mivel a=1 és b=2) console.log(osszeadas(5)); // Kiírja: 7 (mivel a=5 és b=2) console.log(osszeadas(3, 4)); // Kiírja: 7 (mivel a=3 és b=4) // Anonim függvény használata, callbackként. setTimeout(function () { console.log("Ez egy callback függvény, 1mp időzítéssel."); }, 1000); |
Hogyan lesz a sima függvényből arrow function? El kell hagyni mindent, amit lehet, a függvény nevét, a function szót. Röviden tömören:
function negyzet(a){
return a*a;
}
n = function (a) {return a*a;}
n = (a) => {return a*a;}
n = a => {return a*a;}
Arrow funcions: rövidebb szintaxist kínálnak az anonim függvények létrehozásához. Tehát () => jelölés paraméterek nélkül. Paraméterekkel így néz ki: (par1 = „valami” par2 = 1) =>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// arrow function változóhoz rendelve let nyilFgv = () => { console.log("Ez egy arrow function. Ez is anonim függvény."); }; nyilFgv(); // arrow function paraméterrel let nyilPara = (nev = "Vendég") => { console.log(`Hello, ${nev}!`); }; nyilPara(); // Kiírja: Hello, Vendég! nyilPara("Viktor"); // Kiírja: Hello, Viktor! // arrow funcion több paraméterrel, és alapértelmezett értékekkel mert csak let osszeadas = (a = 1, b = 2) => a + b; console.log(osszeadas()); // Kiírja: 3 (mivel a=1 és b=2) console.log(osszeadas(5)); // Kiírja: 7 (mivel a=5 és b=2) console.log(osszeadas(3, 4)); // Kiírja: 7 (mivel a=3 és b=4) // Nyíl függvény használata callbackként setTimeout(() => { console.log("Ez egy időzített kiírás, arrow function a setTimeout függvényben."); }, 1000); |
Eljárás
Az eljárást is a function kulcsszóval deifináljuk, csak itt nincs visszatérési érték. Ugyanúgy utasításokat hajt végre, mint a függvény.
Az első példában kiszámoljuk a téglalap területét és kerületét. Ehhez 2db paramértert vár az eljárásunk, nyilván a és b oldal hosszát. Kezdőértékük legyen 1. Az eljárás ki is írja az eredményt kozolra. Az eljárás is lehet anonim.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Hagyományos függvény alapértelmezett paraméterekkel function fgvTeglalap(a = 1, b = 1) { let k = 2 * (a + b); let t = a * b; console.log(`a: ${a}, b: ${b}`); console.log(`k: ${k}`); console.log(`t: ${t}`); } // Példák különböző paraméterekkel fgvTeglalap(); // (a=1, b=1, k=4, t=1) fgvTeglalap(5); // (a=5, b=1, k=12, t=5) fgvTeglalap(5, 3); // (a=5, b=3, k=16, t=15) |
Anonim eljárás, paraméterekkel
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let fgvTeglalap = function (a = 1, b = 1) { let k = 2 * (a + b); let t = a * b; console.log(`a: ${a}, b: ${b}`); console.log(`k: ${k}`); console.log(`t: ${t}`); }; // Példák különböző paraméterekkel fgvTeglalap(); // (a=1, b=1, k=4, t=1) fgvTeglalap(5); // (a=5, b=1, k=12, t=5) fgvTeglalap(5, 3); // (a=5, b=3, k=16, t=15) |
Változó hosszúságú paraméter
Néha előfordul, hogy nem tudjuk pontosan mennyi paramétert fog kapni a függvényünk. Ebben az esetben használhatjuk a spread operatort: … (tripla pont)
A következő példában léterhozunk egy kerulet() függvényt. Ennek lesz egy fix első paramétere. Ha csak ennyit kap, akkor négyzet kerületét számoljuk ki. A változó paraméter számot a …tobbi_oldal várja. Ennek a hosszát a length függvénnyel le tudjuk kérdezni.
példa:
Írj egy programot, amelyben van egy ‘kerulet’ nevű függvény, amely az egyetlen kötelező paramétere
mellett fogadhat több paramétert is! Az opcionális paraméterek száma alapján döntse el milyen
síkidomról van szó, és számolja ki a kerületét
0 tetszőleges paraméter: négyzet
1 tetszőleges paraméter: téglalap
2 tetszőleges paraméter: háromszög
3 vagy több tetszőleges paraméter: sokszög
A program tartalmazzon mindegyik síkidom típusra egy-egy függvényhívást!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
function kerulet(elso_oldal, ...tobbi_oldal) { var osszeg = elso_oldal; var extra_parameterek_szama = tobbi_oldal.length; // Minden kapott oldalt hozzáadunk az összeghez for (var i = 0; i < tobbi_oldal.length; i++) { osszeg = osszeg + tobbi_oldal[i]; } if (extra_parameterek_szama === 0) { // Négyzet: 4 * az első oldal console.log("Alakzat: Négyzet"); return 4 * elso_oldal; } else if (extra_parameterek_szama === 1) { // Téglalap: 2 * (a + b) console.log("Alakzat: Téglalap"); return 2 * (elso_oldal + tobbi_oldal[0]); } else if (extra_parameterek_szama === 2) { // Háromszög: a + b + c console.log("Alakzat: Háromszög"); return osszeg; } else { // Sokszög console.log("Alakzat: Sokszög (" + (extra_parameterek_szama + 1) + " oldalú)"); return osszeg; } } console.log("Eredmény: " + kerulet(5)); // Négyzet console.log("Eredmény: " + kerulet(5, 10)); // Téglalap console.log("Eredmény: " + kerulet(3, 4, 5)); // Háromszög console.log("Eredmény: " + kerulet(2, 2, 2, 2, 2)); // Sokszög |