14. diel - Funkcie v JavaScripte
V dnešnom tutoriále základov JavaScriptu si ukážeme, ako vytvárať vlastné funkcie. Vysvetlíme si, čo to sú parametre funkcie alebo jej návratová hodnota a ukážeme si anonymnú funkciu.
Funkcie v JavaScripte
Zatiaľ sme iba používali funkcie alebo metódy, ktoré už máme v JavaScripte k dispozícii. Nie je však nič ťažké vytvoriť si vlastnú funkciu. Rozdeľovanie skriptov do funkcií má nasledujúce výhody:
- Prehľadnosť – Pokiaľ sa nejaký algoritmus skladá z viacerých krokov, vytvoríme funkciu pre každý tento krok a funkcie potom voláme po sebe. Každá funkcia teda obsahuje iba to, čo do nej patrí. Kód sa stáva prehľadnejším.
- DRY (neopakujme sa) – Skratka DRY označuje Do not Repeat Yourself, teda neopakujte sa. Ide o uznávaný programátorský princíp, ktorý odsudzuje duplicitný kód. Ak chceme nejakú časť kódu použiť viackrát, nemusíme ju opisovať, ale oddelíme ju do funkcie. Potom iba zavoláme jednu funkciu na viacerých miestach programu. Keď potom chceme v kóde niečo opraviť, nehľadáme chybu na niekoľkých miestach, ale opravíme ju iba v tej jednej funkcii.
- Možnosť použitia knižníc – Funkcie, ktoré často používame, môžeme vkladať do samostatných súborov, ktorým sa niekedy hovorí knižnice. Ak si vytvoríme napr. knižnicu na prihlasovanie užívateľov, môžeme ju potom len vložiť do iného projektu, načítať a začať používať dané funkcie bez toho, aby sme niečo znovu programovali.
Správny program by mal byť poskladaný z niekoľkých kratších funkcií, nemal by vyzerať ako dlhá rezance kódu
Jednoduchá funkcia
Vytvorme si úplne jednoduchú funkciu, ktorá len niečo vypíše. Funkciu
deklarujeme pomocou kľúčového slova function
. Za ním nasleduje
názov funkcie a zátvorky. Telo funkcie je potom vložené do bloku zo
zložených zátvoriek.
Názov funkcie píšeme v JavaScripte pomocou camelCase notácie, teda s malým písmenom na začiatku, ďalšie slová v názve funkcie začínajú veľkým písmenom.
Funkciu pomenujeme podľa toho, čo robí, jej názov teda obsahuje sloveso v
rozkazovacom spôsobe. Akonáhle funkciu niekde deklarujeme, môžeme ju volať.
Urobíme to jednoducho napísaním jej názvu a zátvoriek. Funkcia, ktorá
vypíše do dokumentu Ahoj, vřele tě tu vítám!
, by vyzerala
nasledovne:
function pozdrav() { document.write("Ahoj, vrelo ťa tu vítam!"); }
Potom funkciu zavoláme:
function pozdrav() { document.write("Ahoj, vrelo ťa tu vítam!"); } pozdrav(); // zavolanie funkcie
Výsledok:
Funkcie s parametrami/argumentmi
Funkcia môže mať aj ľubovoľný počet vstupných
parametrov, ktoré píšeme do zátvorky v jej definícii a podľa nich
ovplyvňujeme jej správanie. Majme situáciu, keď chceme pozdraviť nášho
návštevníka podľa mena. Rozšírime teda existujúcu funkciu o parameter
jmeno
a ten potom pridáme s konkrétnou hodnotou do volania
funkcie:
function pozdrav(jmeno) { document.write("Ahoj, vrelo ťa tu vítam " + jmeno + "!<br />"); } pozdrav("Karle"); // zavolanie funkcie
Keby sme teraz chceli pozdraviť niekoľko ľudí, stačí iba viackrát zavolať našu funkciu:
pozdrav("Karle"); pozdrav("Davide"); pozdrav("Marenko");
Výsledok:
Funkcia môže mať viac vstupných parametrov oddelených
čiarkami. Pri volaní funkcie dokonca môžeme niektoré parametre vynechať.
Vnútri funkcie budú mať potom hodnotu undefined
:
function pozdrav(jmeno, textPozdravu) { document.write(textPozdravu + " " + jmeno + "!<br>"); } pozdrav("Petre"); pozdrav("Jano", "Ahoj");
Pri prvom volaní funkcie odovzdávame iba jeden parameter. Druhý parameter
neuvádzame, preto bude mať hodnotu undefined
. Pri druhom volaní
funkciu odovzdávame oba parametre. V prvom parametri je meno osoby, ktorú
chceme pozdraviť, druhý parameter potom obsahuje text pozdravu:
Nastavenie východiskovej hodnoty parametra funkcie
Ak by sme chceli dosadiť nejakú východiskovú hodnotu parametra v prípade, že nie je zadaný, uvedieme ju priamo v deklarácii funkcie:
function pozdrav(jmeno, textPozdravu = "Dobrý deň") { document.write(textPozdravu + " " + jmeno + "!<br>"); } pozdrav("Petre"); pozdrav("Jano", "Ahoj");
Pri volaní funkcie s jedným parametrom bude teraz použitý východiskový
pozdrav Dobrý den
:
Návratová hodnota funkcie
Funkcia môže tiež vracať nejakú hodnotu. V našom
prípade by sme nemuseli do dokumentu rovno zapisovať (napríklad preto, že
budeme chcieť s textom ešte ďalej pracovať a nie ho rovno vypísať).
Slúži na to príkaz return
:
function pozdrav(jmeno) { return "Ahoj, vrelo ťa tu vítam " + jmeno + "!"; } let text = pozdrav("Karle"); document.write(text);
V ukážke ukladáme hodnotu funkcie pozdrav()
do premennej
text
, ktorú následne vypíšeme.
Výhoda funkcií je teda v prehľadnosti a úspornosti. Napíšeme nejakú vec raz a voláme ju pomocou funkcie napríklad stokrát na rôznych miestach skriptu. Keď sa rozhodneme funkciu zmeniť, vykonáme zmenu len na jednom mieste a táto zmena sa prejaví všade, čo značne znižuje riziko chýb. V príklade, kde pozdravujeme Karola, Davida a Marienku, nám stačí zmeniť text pozdravu vo funkcii a zmení sa vo všetkých troch volaniach. Nemať kód vo funkcii, museli by sme prepisovať tri vety av nejakej by sme mohli urobiť chybu.
Uloženie funkcie do premennej
Posuňme sa ďalej. JavaScript sa líši od iných jazykov tým, ako pracuje s funkciami. Funkcia tu vie ešte viac, než sme si ukázali. Ak si spomíname, v lekcii Úvod do JavaScriptu sme hovorili o tzv. funkcionálnej paradigme. Ide o špecifický štýl programovania a myslenia pomocou funkcií. V skutočnosti sú všetky funkcie v JavaScripte vnútorne premenné. Funkciu môžeme uložiť do bežnej premennej az tejto premennej ju neskôr volať:
function pozdrav(jmeno) { return "Ahoj, vrelo ťa tu vítam " + jmeno + "!"; } let ulozenaFunkce = pozdrav; // teraz máme v premennej uloženú funkciu pozdrav let text = ulozenaFunkce("Karle"); // zavoláme funkciu pomocou premennej document.write(text); // vypíšeme výstup funkcie
Všimnime si, že pri ukladaní funkcie do premennej, na rozdiel od jej volania, nepíšeme za jej názvom zátvorky.
Výstup:
Anonymné funkcie
Funkciu môžeme definovať priamo v priradení do premennej, hovoríme potom o tzv. anonymnej funkcii, pretože nemá meno. Je často vytváraná a používaná pre konkrétne, jednorazové úlohy, napríklad na reakciu na určité udalosti v prehliadači. Predstavme si anonymné funkcie ako nástroj vytvorený na mieru pre konkrétnu úlohu, ktorú už potom nikdy nebudeme potrebovať.
Predchádzajúci príklad upravíme pomocou anonymnej funkcie takto:
let pozdrav = function(jmeno) { return "Ahoj, vrelo ťa tu vítam " + jmeno + "!"; } let text = pozdrav("Karle"); document.write(text);
Program teraz funguje rovnako, len funkciu nevoláme priamo, ale z premennej. V tomto prípade nemôžeme funkciu zavolať pred tým, než je premenná deklarovaná.
Funkcie definované oboma ukázanými spôsobmi môžeme tiež odovzdávať ako parameter ďalším funkciám. To si ukážeme najmä pri obsluhe udalostí v ďalších lekciách.
V nasledujúcom cvičení, Riešené úlohy k 12.-14. lekciu JavaScriptu, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 731x (3.13 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript