11 KiB
JavaScript alapok: Metódusok és függvények
Sketchnote készítette: Tomomi Imura
Előadás előtti kvíz
Amikor kódot írunk, mindig arra törekszünk, hogy az olvasható legyen. Bár ez elsőre ellentmondásosnak tűnhet, a kódot sokkal többször olvassák, mint írják. Az egyik alapvető eszköz a fejlesztők számára az olvasható és karbantartható kód biztosításához a függvény.
🎥 Kattints a fenti képre a metódusokról és függvényekről szóló videóért.
Ezt a leckét elérheted a Microsoft Learn oldalán!
Függvények
A függvény alapvetően egy kódrészlet, amelyet igény szerint végrehajthatunk. Ez tökéletes olyan helyzetekben, amikor ugyanazt a feladatot többször kell elvégezni; ahelyett, hogy a logikát több helyen megismételnénk (ami nehézkessé tenné a frissítést), egy helyre központosíthatjuk, és akkor hívhatjuk meg, amikor szükség van rá – sőt, függvényeket más függvényekből is meghívhatunk!
Ugyanilyen fontos a függvény elnevezése. Bár ez triviálisnak tűnhet, a név gyors módot biztosít a kód egy részének dokumentálására. Ezt úgy is elképzelhetjük, mint egy gomb címkéjét. Ha rákattintok egy "Időzítő törlése" feliratú gombra, tudom, hogy az megállítja az órát.
Függvény létrehozása és meghívása
A függvény szintaxisa a következőképpen néz ki:
function nameOfFunction() { // function definition
// function definition/body
}
Ha szeretnék létrehozni egy függvényt, amely üdvözlő szöveget jelenít meg, az így nézhet ki:
function displayGreeting() {
console.log('Hello, world!');
}
Amikor meg akarjuk hívni (vagy aktiválni) a függvényt, a függvény nevét követjük ()-kal. Érdemes megjegyezni, hogy a függvényt definiálhatjuk azelőtt vagy azután, hogy meghívnánk; a JavaScript fordító megtalálja nekünk.
// calling our function
displayGreeting();
NOTE: Létezik egy speciális típusú függvény, amelyet metódusnak nevezünk, és amit már használtál is! Valójában láttuk ezt a fenti példában, amikor a
console.log-ot használtuk. A metódus abban különbözik a függvénytől, hogy egy objektumhoz van csatolva (például aconsole-hoz), míg a függvény szabadon lebeg. Sok fejlesztő ezeket a kifejezéseket felcserélve használja.
Függvények legjobb gyakorlatai
Néhány jó tanács, amit érdemes szem előtt tartani függvények létrehozásakor:
- Mindig használj beszédes neveket, hogy tudd, mit csinál a függvény
- Használj camelCase-t a szavak összekapcsolásához
- Tartsd a függvényeket egy adott feladatra fókuszálva
Információ átadása függvényeknek
Ahhoz, hogy egy függvény rugalmasabb legyen, gyakran szeretnénk információt átadni neki. Ha a fenti displayGreeting példát nézzük, az csak Hello, world!-ot jelenít meg. Ez nem a leghasznosabb függvény, amit létrehozhatunk. Ha egy kicsit rugalmasabbá szeretnénk tenni, például lehetővé tenni, hogy megadjuk az üdvözlendő személy nevét, hozzáadhatunk egy paramétert. A paraméter (néha argumentumnak is nevezik) egy kiegészítő információ, amelyet a függvénynek küldünk.
A paramétereket a definícióban zárójelek között soroljuk fel, vesszővel elválasztva, például így:
function name(param, param2, param3) {
}
Frissíthetjük a displayGreeting függvényt, hogy elfogadjon egy nevet, és azt jelenítse meg.
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
Amikor meg akarjuk hívni a függvényt, és átadni a paramétert, azt a zárójelekben adjuk meg.
displayGreeting('Christopher');
// displays "Hello, Christopher!" when run
Alapértelmezett értékek
Még rugalmasabbá tehetjük a függvényt, ha több paramétert adunk hozzá. De mi van akkor, ha nem akarjuk, hogy minden értéket kötelezően meg kelljen adni? Az üdvözlő példánál maradva, a nevet kötelezővé tehetjük (hiszen tudnunk kell, kit üdvözlünk), de az üdvözlés szövegét opcionálissá tehetjük. Ha valaki nem akarja testre szabni, alapértelmezett értéket adunk meg. Az alapértelmezett értéket úgy állítjuk be, mint egy változó értékét - parameterName = 'defaultValue'. Egy teljes példa:
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
Amikor meghívjuk a függvényt, eldönthetjük, hogy megadunk-e értéket a salutation paraméternek.
displayGreeting('Christopher');
// displays "Hello, Christopher"
displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"
Visszatérési értékek
Eddig a függvényünk mindig a konzolra írt ki. Néha ez pontosan az, amit keresünk, különösen akkor, amikor olyan függvényeket hozunk létre, amelyek más szolgáltatásokat hívnak meg. De mi van akkor, ha egy segédfüggvényt szeretnék létrehozni, amely egy számítást végez, és visszaadja az értéket, hogy máshol felhasználhassam?
Ezt úgy érhetjük el, hogy visszatérési értéket használunk. A visszatérési értéket a függvény adja vissza, és ugyanúgy tárolhatjuk egy változóban, mint egy szöveget vagy számot.
Ha egy függvény visszaad valamit, akkor a return kulcsszót használjuk. A return kulcsszó egy értéket vagy hivatkozást vár, amit visszaadunk, például így:
return myVariable;
Létrehozhatunk egy függvényt, amely üdvözlő üzenetet készít, és visszaadja az értéket a hívónak.
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
Amikor meghívjuk ezt a függvényt, az értéket egy változóban tároljuk. Ez ugyanaz, mint amikor egy változót statikus értékre állítunk (például const name = 'Christopher').
const greetingMessage = createGreetingMessage('Christopher');
Függvények függvények paramétereként
Ahogy haladsz a programozói pályádon, találkozni fogsz olyan függvényekkel, amelyek más függvényeket fogadnak paraméterként. Ez a trükk gyakran akkor hasznos, amikor nem tudjuk, mikor fog valami megtörténni vagy befejeződni, de tudjuk, hogy egy műveletet végre kell hajtanunk válaszként.
Például a setTimeout, amely elindít egy időzítőt, és kódot hajt végre, amikor az lejár. Meg kell mondanunk neki, milyen kódot akarunk végrehajtani. Ez tökéletes feladat egy függvény számára!
Ha futtatod az alábbi kódot, 3 másodperc múlva megjelenik az üzenet: 3 másodperc eltelt.
function displayDone() {
console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);
Névtelen függvények
Nézzük meg újra, amit építettünk. Létrehozunk egy függvényt névvel, amelyet csak egyszer fogunk használni. Ahogy az alkalmazásunk bonyolultabbá válik, láthatjuk, hogy sok olyan függvényt hozunk létre, amelyet csak egyszer hívunk meg. Ez nem ideális. Mint kiderül, nem mindig kell nevet adnunk!
Amikor egy függvényt paraméterként adunk át, elkerülhetjük, hogy előre létrehozzuk, és helyette a paraméter részeként építhetjük meg. Ugyanazt a function kulcsszót használjuk, de a paraméter részeként építjük meg.
Írjuk át a fenti kódot névtelen függvény használatára:
setTimeout(function() {
console.log('3 seconds has elapsed');
}, 3000);
Ha futtatod az új kódot, ugyanazt az eredményt kapod. Létrehoztunk egy függvényt, de nem kellett nevet adnunk neki!
Fat arrow függvények
Sok programozási nyelvben (beleértve a JavaScriptet is) gyakori rövidítés az úgynevezett arrow vagy fat arrow függvények használata. Ez egy speciális => jelölést használ, amely egy nyílra hasonlít – innen a név! Az => használatával kihagyhatjuk a function kulcsszót.
Írjuk át a kódot még egyszer, hogy fat arrow függvényt használjunk:
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
Mikor melyik stratégiát használjuk?
Most láttad, hogy három módja van annak, hogy függvényt adjunk át paraméterként, és talán azon gondolkodsz, mikor melyiket használjuk. Ha tudod, hogy a függvényt többször fogod használni, hozd létre normál módon. Ha csak egy helyen fogod használni, általában a névtelen függvény a legjobb választás. Hogy fat arrow függvényt vagy a hagyományos function szintaxist használod, az rajtad múlik, de észre fogod venni, hogy a modern fejlesztők többsége az =>-t részesíti előnyben.
🚀 Kihívás
Meg tudod fogalmazni egy mondatban a különbséget a függvények és a metódusok között? Próbáld meg!
Előadás utáni kvíz
Áttekintés és önálló tanulás
Érdemes további információkat olvasni a fat arrow függvényekről, mivel egyre gyakrabban használják őket a kódokban. Gyakorold egy függvény írását, majd írd át ezt a szintaxist használva.
Feladat
Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.