Robert Whitney
JavaScript függvények – tartalomjegyzék:
Eddig már láttunk néhány jelentős aspektust a JavaScriptben, valamint néhány leggyakoribb kódolási legjobb gyakorlatot, amelyeket követnünk kellene. Ezek a gyakorlatok okkal léteznek, és ahogy használjuk őket, sok hibát és frusztrációt megspórolnak nekünk, amivel egyébként szembesülnénk. Az egyik legjobb gyakorlat, amit láttunk, a DRY elv követése volt, amely alapvetően azt mondta: Ne ismételd meg magad. Az egyik mód, ahogyan ezt az elvet alkalmaztuk, az volt, hogy ciklusokat használtunk a programunkban, pontosabban a “for ciklusok” rengeteg időt és kódot spóroltak meg nekünk. Ebben az oktatóanyagban egy másik fontos építőelemet fogunk látni a programozásban, amelyet “függvényeknek” hívunk.
A JavaScript függvények típusai
A függvények rendkívül gyakoriak a programozásban, és ez a JavaScriptre is vonatkozik. Valójában annyira elterjedtek, hogy néhány JavaScript keretrendszer, mint például a React, a JavaScript függvények kihasználására épült, mint alapvető építőelem a weboldalak front-endjének létrehozásához. És ezt jó okból tették. A JavaScript függvények nagy rugalmasságot biztosítanak, miközben rendkívül kiszámítható és moduláris kódot nyújtanak. Ennek eredményeként sokkal tisztább kódot kapunk kevesebb ismétléssel és sokkal kevesebb hibával. Az egyik első dolog, amit tudnod kell a függvényekről, hogy két fő típusa van. Ezek a “tiszta függvények” és az “impur függvények”. Általánosságban elmondható, hogy a tiszta függvényeket kell használnunk, ahol csak lehet, amennyire csak lehetséges. A tiszta függvények számos előnyt nyújtanak, amelyek megkönnyítik a velük való munkát az impure függvényekhez képest. Először nézzük meg a tiszta JavaScript függvényeket, majd merüljünk el az impure függvényekben is.
Tiszta függvények a JavaScriptben
A tiszta függvények lényegében olyan függvények, amelyek bizonyos szabályokat követnek. És mivel követik ezeket a szabályokat, rendkívül kiszámíthatóak, könnyebben hibakereshetők egy nagyobb rendszerben, modulárisak, valamint számos egyéb előnnyel rendelkeznek.
Egy tiszta függvény kap némi bemenetet és visszaad némi kimenetet. Nem módosítja közvetlenül a bemeneteket, és nem lép kapcsolatba a környezettel más módon. Ez azt jelenti, hogy nem küld értesítéseket, nem ad nyilatkozatot, miközben mást csinál, és nem lép kapcsolatba a környezetével más módon.
Így amikor egy tiszta függvénnyel dolgozol, tudod, hogy függetlenül attól, hol futtatod a kódodat vagy mikor futtatod a kódodat, amíg ugyanazokat a bemeneteket adod meg, ugyanazokat a kimeneteket fogod kapni. Nézzük meg ezt néhány példával.
// duplázd meg az eredeti számot
function double(num){
return num * 2;
}
// triplázd meg az eredeti számot
function triple(num){
return num * 3;
}
// adj hozzá 100-at az eredeti számhoz
function add100(num){
return num + 100;
}
// adj össze két számot
function addTwoNums(num1, num2){
const sum = num1 + num2;
return sum;
}
// szorozz meg két számot
function multiplyTwoNums(num1, num2){
const total = num1 * num2;
return total;
}
A fenti JavaScript függvények mind tiszta függvények. Közelebbről megnézve észrevehetted a mintát, amelyet a tiszta függvények létrehozásakor használunk. Az első lépés az, hogy megírjuk a “function” kulcsszót, hogy jelezzük a JavaScriptnek, hogy egy függvényt szeretnénk definiálni.
A következő lépés, hogy nevet adjunk a függvénynek, lehetőleg ennek a névnek rövidnek kell lennie, de elég leíró ahhoz, hogy valaki, aki később találkozik vele, megértse, mit csinál a függvény. Például, ha 100-at adunk hozzá egy számhoz, a függvényt “add100”-nak nevezhetjük, ha egy számot duplázunk, a függvényt “double”-nak nevezhetjük, és így tovább.
Miután megfelelően elneveztük a függvényt, a következő lépés, hogy bemeneteket adjunk neki. A bemeneteket zárójelek között adjuk meg, és ha több bemenetünk van, vesszővel választjuk el őket. Pontosan úgy, ahogyan a “multiplyTwoNums” függvénynél tettük. (Egy mellékes megjegyzés, hogy a számokat a programozásban gyakran “nums”-nak hívják röviden, így amikor egy függvényt nevezünk el, ezt a közismert tudást felhasználhatjuk, hogy rövid, de leíró függvényneveket kapjunk.)
A függvénynek megadott bemeneteket általában “paramétereknek” nevezik, amikor létrehozzuk a JavaScript függvényeket, eldöntjük, hány paramétere lesz a függvénynek. Amikor eldöntjük, hogy használni fogjuk a függvényt, megadjuk ezeket a paramétereket “értékekkel”. Azokat az értékeket, amelyeket a függvény használatakor megadunk, szintén “argumentumoknak” nevezik. Tehát amikor bemenetet adunk a függvénynek, ezt a folyamatot “argumentumok átadásának” is nevezik. Nézzük meg ezt néhány példával.
// először definiáljuk a függvényt, amely egy számot vesz
// és megszorozza 10-zel
function multiplyBy10(num1){
return num1 * 10;
}
// most hívjuk meg ezt a függvényt // mentsük el az eredményt egy állandóba // és jelenítsük meg az eredményeket const bigNum = multiplyBy10(3); alert(bigNum); // num1 itt a paraméter. // az értéket 3-ként adtuk át a függvénynek argumentumként. // a függvény eredményeit elmentettük // egy bigNum nevű állandóba. // a bigNum nevű állandót megjelenítettük a felhasználónak.
Ahogy a fenti kódban láttad, még akkor is, amikor valamit meg akarunk jeleníteni a felhasználónak, a függvényt külön kell tartanunk az alert függvénytől. Ha az eredményeket a felhasználónak a függvényen belül szeretnénk megjeleníteni, ez megkövetelné, hogy a függvény kapcsolatba lépjen a számítógép más részeivel, és ezáltal a függvényünk impure lenne. Tehát általánosságban elmondható, hogy a függvényeket bemenetek megadására és visszatérési értékek elvárására szeretnénk használni. Amikor megkapjuk azt a visszatérési értéket, akkor azt ténylegesen megjeleníthetjük vagy más JavaScript függvényeket hajthatunk végre vele a szükségleteinknek megfelelően, de a lényeg az, hogy a visszatérési értékek megjelenítése és a számítások elvégzése különböző feladatok legyenek.
Tehát eddig láttuk, hogy a “function” kulcsszót használhatjuk a függvény deklarálásának megkezdésére, majd megfelelően elnevezzük a függvényt, majd megnyitjuk és bezárjuk a zárójeleket, és megmondjuk a függvénynek, hogy milyen paraméterekre van szüksége, majd megnyitjuk a kapcsos zárójeleket, és megmondjuk a függvénynek, mit szeretnénk, hogy tegyen, miután eljutottunk egy eredményhez, azt a “return” kulcsszóval visszaadjuk. Aztán bezárjuk a kapcsos zárójeleket. Mindezek a lépések szükségesek egy tiszta függvény definiálásához. Most, hogy van egy függvényünk, használhatjuk a programunk más részein. A függvény használatát általában “függvényhívásnak” nevezik.
A függvényhívás sokkal egyszerűbb, mint a függvény deklarálása. A függvény hívásához használhatjuk a nevét, megnyithatjuk a zárójeleket, átadhatunk neki néhány argumentumot, és bezárhatjuk a zárójeleket. Amikor ezt tesszük, a függvény visszaadja nekünk a visszatérési értéket, amelyet definiáltunk. Attól függően, hogy mit szeretnénk tenni a visszatérési értékkel, hozzárendelhetjük egy változóhoz vagy állandóhoz, további számításokat végezhetünk vele, elküldhetjük más számítógépeknek, vagy közvetlenül megjeleníthetjük az eredményeket is. Nézzük meg ezt néhány példával.
// kezdjük egy függvénnyel, amely két argumentumot vesz
// megszorozza őket és visszaadja az eredményt.
// vagy közvetlenül visszaadhatjuk az eredményt,
// vagy ideiglenesen létrehozhatunk egy állandót
// és azt is visszaadhatjuk.
function multiplyTwoNums(num1, num2) {
const total = num1 * num2;
return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
return num1 * num2;
// a fenti két függvény pontosan ugyanazt az eredményt adja
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// ellenőrizhetjük a függvények eredményeinek egyenlőségét
// egy másik függvénnyel
function checkEquality(number1, number2){
return number1 === number2;
// ha a két függvény eredménye ugyanaz,
// a checkEquality függvény “true”-t fog visszaadni
// mint logikai adattípus
const isEqual = checkEquality(result1, result2);
// most felhasználhatjuk ezt a logikai értéket egy üzenet megjelenítésére
if (isEqual){
alert("Mindkettő ugyanazt az eredményt adja!");
} else {
alert("Nem ugyanaz a dolog!");
}
A fenti kód futtatása a Chrome Snippets-ben a következő eredményt adná:
Eddig tiszta függvényekkel dolgoztunk, és ez általában az, amire a legtöbb időben törekszünk a kódolás során. De ez nem jelenti azt, hogy csak tiszta függvényekkel fogsz dolgozni. Miután megértetted a tiszta függvényeket, az impure függvények viszonylag könnyebbek. Amikor egy függvényt definiálunk vagy deklarálunk, a függvény neve után valójában nem kell átadnunk neki semmilyen paramétert. Ebben az esetben a zárójeleket üresen hagyjuk, és nem kell visszaadnunk semmit a függvényből.
Még inkább, mivel bármilyen kódot írhatunk a függvény kapcsos zárójelei közé, interakcióba léphetünk a külvilággal, adatokat küldhetünk és fogadhatunk, meglévő adatokat módosíthatunk, értesítéseket jeleníthetünk meg, és így tovább. Mindez nem tilos, és a console.log utasítások hozzáadása a kód fejlesztési folyamat során valóban hasznos lehet. Ezért nem tartózkodunk közvetlenül az impure függvényektől, de mivel sok súrlódást és hibát okozhatnak a kódban, beleértve a kód tesztelésének nehezebbét, arra törekszünk, hogy a feladatokat a lehető legjobban tiszta JavaScript függvényekbe szervezzük. Még akkor is, amikor impure függvényeket készítünk az alert vagy console.log utasítások hozzáadásával, általában szeretnénk eltávolítani őket a kódunkból, akár törléssel, akár megjegyzéssel.
Nézzük meg ezt néhány példával.
// üdvözöld a felhasználót egy impure függvénnyel
// nem vesz fel argumentumokat és nem ad vissza semmit
// interakcióba lép a külvilággal is
// egy értesítés megjelenítésével
function greet(){
alert("Helló Felhasználó!");
}
// jegyezd meg, hogy az eredmények nem fognak megjelenni
// hacsak nem hívjuk meg a függvényt
greet();
// végezzünk néhány számítást és logoljuk őket
function squareNum(num1){
const result = num1 * num1;
console.log(result);
}
// ez meg fogja jeleníteni az eredményt a JavaScript konzolon, amely alul található
// A konzolt, amelyet éppen használtunk, széles körben használják a programozásban
// beleértve a JavaScriptet is.
// a console.log utasítások valóban hasznosak lehetnek
// abban, hogy elmondják, mi történik a programodban
// így, ha valami váratlan történik
// pontosan láthatod, hol és mikor történik
squareNum(7);
function multiplyTwoNums(num1, num2){
console.log("Az első szám: " + num1);
console.log("A második szám: " + num2);
const result = num1 * num2;
console.log("Az eredmény szorzás: " + result);
}
// hívjuk meg a fenti függvényt két általunk választott számmal // és ellenőrizzük a JavaScript konzolunkat a logokért multiplyTwoNums(5, 7);
A fenti kód futtatása a következő eredményt adná:
Ahogy az outputból láthatod, az első függvényből belülről megjelenik az értesítési utasítás. Az eredmény 49, amely a JavaScript konzolban van naplózva. Ezt követően részletesebb outputot kapunk a konzolban a harmadik függvényről. A console.log utasítások készítése a programozásban meglehetősen gyakori, a használt programozási nyelvtől függően a pontos név változhat, de az ötlet ugyanaz marad. A console.log utasításokkal belső nézetet nyerhetünk a programunkba, és jobban megérthetjük a kódunkat. Ez különösen hasznos eszköz, amikor valami rosszul sül el a programodban, és próbálod kideríteni, hol hibáztál pontosan.
A következő oktatóanyagban egy másik fontos témát fogunk látni a JavaScriptben, amely az objektumok. Mielőtt továbblépnénk a következő oktatóanyagra, jó ötlet újra átnézni ezt a részt, hogy a fogalmak jobban rögzüljenek. Azt is javaslom, hogy írd be a példákat, amelyeken dolgoztunk, és tapasztald meg őket első kézből. Amikor készen állsz, folytatjuk az objektumokkal a JavaScriptben a következő oktatóanyagban.
Robert Whitney
JavaScript szakértő és oktató, aki IT osztályokat mentorál. Fő célja, hogy növelje a csapat termelékenységét azáltal, hogy megtanítja másoknak, hogyan működjenek együtt hatékonyan a kódolás során.
