14. diel - Funkcie v JavaScripte

V minulej lekcii, Textové reťazce v JavaScripte do tretice - Split a join, sme si uviedli metódy split() a join() na textových reťazcoch.

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.

V ďalších seriáloch si ukážeme aj ako členiť funkcie do objektov. Dosiahneme tým naozaj veľmi čitateľný kód, ktorý sa dá navyše ľahko rozširovať.

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 Hello, I warmly welcome you here!, by vyzerala nasledovne:

function greet() {
    document.write("Hello, welcome here!");
}

Potom funkciu zavoláme:

function greet() {
    document.write("Hello, welcome here!");
}

greet(); // calling the function

Výsledok:

Funkcie s parametrami/ar­gumentmi

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, kedy chceme pozdraviť nášho návštevníka podľa mena. Rozšírime teda existujúcu funkciu o parameter name a ten potom pridáme s konkrétnou hodnotou do volania funkcie:

function greet(name) {
    document.write("Hello, welcome here " + name + "!<br />");
}

greet("Carl"); // calling the function

Keby sme teraz chceli pozdraviť niekoľko ľudí, stačí iba viackrát zavolať našu funkciu:

greet("Carl");
greet("David");
greet("Hansel");

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 greet(name, greetingText) {
    document.write(greetingText + " " + name + "!<br>");
}

greet("Peter");
greet("Jane", "Hi");

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 greet(name, greetingText = "Hello") {
    document.write(greetingText + " " + name + "!<br>");
}

greet("Peter");
greet("Jane", "Hi");

Pri volaní funkcie s jedným parametrom bude teraz použitý východiskový pozdrav Hello:

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 greet(name) {
    return "Hello, welcome here " + name + "!";
}

let text = greet("Carl");
document.write(text);

V ukážke ukladáme hodnotu funkcie greet() 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 Carla, Davida a Hansel, 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 a v 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 a z tejto premennej ju neskôr volať:

function greet(name) {
    return "Hello, welcome here " + name + "!";
}

let savedFunction = greet; // now we have the greeting function stored in a variable
let text = savedFunction("Carl"); // we call the function using variables
document.write(text); //  now we print the output of the function

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 greeting = function(name) {
    return "Hello, welcome here " + name + "!";
}

let text = greeting("Carl");
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š.