Lekce 7 - Funkce v JavaScriptu

Dnešní JavaScript tutoriál je věnován velmi důležitému tématu, kterým je využívání funkcí. Díky funkcím budeme příště schopni reagovat na různé události jako je např. kliknutí na tlačítko a naprogramujeme tak první opravdovou webovou aplikaci.

Tvorba funkcí

Nejprve si nějak jednoduše vysvětleme, co je to funkce. Jedná se o blok kódu, který jednou napíšeme a potom ho můžeme libovolně volat bez toho, abychom ho psali znovu a opakovali se. Funkci deklarujeme pomocí klíčového slova function a obsahuje blok kódu ve složených závorkách. Funkce, která vypíše do dokumentu "Ahoj, vřele tě tu vítám!", by vypadala následovně:

function pozdrav() {
    document.write("Ahoj, vřele tě tu vítám!");
}

Funkci bychom měli volat až poté, co ji deklarujeme:

function pozdrav() {
    document.write("Ahoj, vřele tě tu vítám!");
}

pozdrav(); // zavolání funkce

Výsledek:

Funkce s parametry/argumenty

Funkce může mít také libovolný počet vstupních parametrů, které píšeme do závorky v její definici a podle nich ovlivňujeme její chování. Mějte situaci, kdy chceme pozdravit našeho návštěvníka podle jména. Rozšíříme tedy stávající funkci o parametr jmeno a ten potom přidáme s konkrétní hodnotou do volání funkce:

function pozdrav(jmeno) {
    document.write("Ahoj, vřele tě tu vítám " + jmeno + "!<br />");
}

pozdrav("Karle"); // zavolání funkce

Parametrům se někdy říká také argumenty, zejména, když je pak funkci předáváme.

Kdybychom nyní chtěli pozdravit několik lidí, nemusíme otrocky psát znovu a znovu document.write("Ahoj, vřele...");, stačí nám pouze vícekrát zavolat naší funkci:

pozdrav("Karle");
pozdrav("Davide");
pozdrav("Mařenko");

Výsledek:

Návratová hodnota funkce

Funkce může dále vracet nějakou hodnotu. V našem případě bychom nemuseli do dokumentu rovnou zapisovat (například proto, že budeme chtít s textem ještě dále pracovat a ne ho rovnou vypsat). Slouží k tomu příkaz return:

function pozdrav(jmeno) {
    return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

let text = pozdrav("Karle");
document.write(text);

Vzpomeňme si na minulé příklady, které vypisovaly den v týdnu a kdo má svátek. Můžete si je zkusit přepsat tak, abyste volali funkci. V rámci návrhu by všechen kód měl být rozdělen do funkcí (nebo do objektů, viz další navazující kurz) a to zejména kvůli přehlednosti. My jsme to ze začátku díky jednoduchost zanedbali, nyní to prosím berte na vědomí

Výhoda funkcí je tedy v přehlednosti a úspornosti (můžeme napsat nějakou věc jednou a volat ji třeba stokrát na různých místech skriptu). Když se rozhodneme funkci změnit, provedeme změnu jen na jednom místě a tato změna se projeví všude, což značně snižuje riziko chyb. V příkladě, kde zdravíme Karla, Davida a Mařenku, nám stačí změnit text pozdravu ve funkci a změní se ve všech třech voláních. Nemít kód ve funkci, museli bychom přepisovat 3 věty a v nějaké bychom mohli udělat chybu.

Uložení funkce do proměnné

Posuňme se dále. JavaScript se liší od jiných jazyků tím, jak pracuje s funkcemi. Funkce zde umí ještě více, než jsme si ukázali. Pokud si vzpomínáme, v úvodní lekci do JavaScriptu jsme mluvili o tzv. funkcionálním paradigmatu. Jedná se o specifický styl programování a myšlení pomocí funkcí. Funkci můžeme totiž uložit do běžné proměnné a z této proměnné ji později volat.

function pozdrav(jmeno) {
    return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

let promenna_s_funkci = pozdrav; // nyní máme v proměnné uloženou funkci pozdrav
let text = promenna_s_funkci("Karle"); // zavoláme funkci z proměnné
document.write(text);

Ve skutečnosti jsou všechny funkce v JavaScriptu vnitřně proměnné.

Anonymní funkce

Funkci můžeme definovat přímo v přiřazení do proměnné, hovoříme potom o tzv. anonymní funkci:

let promenna_s_funkci = function(jmeno) {
    return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

let text = promenna_s_funkci("Karle");
document.write(text);

Možná vás napadlo, zda jde předat funkci, uloženou v proměnné, jako parametr jiné funkci. Ano, jde! A to je přesně to, kam jsme směřovali. Takovéto předané funkci se říká callback a stojí na něm v podstatě celý model událostí JavaScriptu. Vyzkoušíme si to na jednoduchém příkladu:

let promenna_s_funkci = function(jmeno) {
    document.write("Ahoj, vřele tě tu vítám " + jmeno + "!");
}

function zavolej_funkci(funkce, jmeno) {
    document.write("Jsem funkce a volám funkci, která mi přišla do parametru v proměnné.<br />");
    document.write("Jako parametr jí dám jmeno, které mi přišlo jako 2. parametr.<br />");
    funkce(jmeno);
}

zavolej_funkci(promenna_s_funkci, "Karle");

Výsledek:

Udělali jsme si funkci k volání jiné funkce. Ta jako parametry bere funkci, kterou budeme volat a dále parametr jmeno, který volané funkci předáme. Kdybychom nyní chtěli zdravit jinak, mohli bychom si udělat další proměnnou s jinou funkcí, např. promenna_s_funkci2 a tu dát volací funkci do parametru místo té předchozí. Zejména v knihovně jQuery (viz další kurzy) budeme událostem takto předávat funkce, které se mají vykonat, když událost nastane.

K funkcím bych ještě dodal, že pokud chceme více vstupních parametrů, oddělíme je čárkami. Při volání funkce dokonce můžeme některé parametry vynechat a překladač nám nevynadá, jen uvnitř funkce budou mít potom hodnotu undefined.

function f(a, b) {
    document.write("a=" + a);
    document.write("b=" + b);
}

f(5);
f(1, 2);

Pokud bychom chtěli dosadit nějakou výchozí hodnotu parametru v případě, že není zadán, stačí si opodmínkovat jeho hodnotu pro undefined a dosadit hodnotu výchozí. Jak vidíte, používání funkcí má v JavaScriptu obrovské možnosti.

V následujícím cvičení, Řešené úlohy k 7. lekci JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.