Lekce 15 - Funkce v JavaScriptu

V minulé lekci, Textové řetězce v JavaScriptu do třetice - Split a join, jsme si uvedli metody split() a join() na textových řetězcích.

V dnešním tutoriálu základů JavaScriptu si ukážeme, jak vytvářet vlastní funkce. Vysvětlíme si, co to jsou parametry funkce nebo její návratová hodnota a ukážeme si anonymní funkci.

Funkce v JavaScriptu

Zatím jsme pouze používali funkce nebo metody, které již máme v JavaScriptu k dispozici. Není ovšem nic těžkého vytvořit si funkci vlastní. Rozdělování skriptů do funkcí má následující výhody:

• Přehlednost – Pokud se nějaký algoritmus skládá z více kroků, vytvoříme funkci pro každý tento krok a funkce potom voláme po sobě. Každá funkce tedy obsahuje jen to, co do ní patří. Kód se stává přehlednějším.
• DRY – Zkratka označuje Don't Repeat Yourself, tedy neopakujte se. Jedná se o uznávaný programátorský princip, který odsuzuje duplicitní kód. Pokud chceme nějakou část kódu použít vícekrát, nemusíme ji opisovat, ale oddělíme ji do funkce. Poté pouze zavoláme jednu funkci na více místech programu. Když potom chceme v kódu něco opravit, nehledáme chybu na několika místech, ale opravíme ji jen v té jedné funkci.
• Možnost použití knihoven – Funkce, které často používáme, můžeme vkládat do samostatných souborů, kterým se někdy říká knihovny. Pokud si vytvoříme např. knihovnu pro přihlašování uživatelů, můžeme ji potom jen vložit do jiného projektu, načíst a začít používat dané funkce, aniž bychom něco znovu programovali.

V dalších seriálech si ukážeme i jak členit funkce do objektů. Dosáhneme tím opravdu velmi čitelného kódu, který lze navíc snadno rozšiřovat.

Správný program by měl být poskládaný z několika kratších funkcí, neměl by vypadat jako dlouhá nudle kódu

Jednoduchá funkce

Vytvořme si úplně jednoduchou funkci, která pouze vypíše text:

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

Funkci deklarujeme pomocí klíčového slova function. Za ním následuje název funkce a závorky. Tělo funkce, tedy to, co se provede po jejím zavolání, je poté vloženo do bloku ve složených závorkách. Funkci pojmenujeme podle toho, co dělá. Její název obsahuje sloveso v rozkazovacím způsobu.

Název funkce píšeme v JavaScriptu pomocí camelCase notace, tedy s malým písmenem na začátku, další slova v názvu funkce začínají velkým písmenem.

Jakmile funkci vytvoříme, můžeme ji volat:

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

pozdrav();

Děláme to jednoduše napsáním jejího názvu a závorek. Zavoláním naší funkce dostaneme výstup:

Funkce s parametry/argumenty

Funkce může mít také libovolný počet vstupních parametrů:

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

Parametry píšeme mezi kulaté závorky za názvem funkce a poté s nimi můžeme pracovat v těle funkce. Zde jsme přidali parametr jmeno a ten potom využili při vypisování textu. Nyní můžeme při volání funkce zadat konkrétní jméno, které se použije pro každý jednotlivý výstup:

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

Vypisovaný řetězec se nám upraví vždy podle konkrétního parametru předaného při volání dané funkce:

Funkce s více parametry by vypadala podobně:

function pozdrav(jmeno, textPozdravu) {
    document.write(textPozdravu + " " + jmeno + "!<br>");
}

Jednotlivé parametry od sebe oddělíme čárkou. Při volání funkce dokonce můžeme některé parametry vynechat:

pozdrav("Petře");
pozdrav("Jano", "Ahoj");

Parametry, které neuvedeme při volání funkce, budou mít uvnitř funkce hodnotu undefined:

Při prvním volání funkce předáváme pouze jeden parametr. Druhý parametr neuvádíme, proto bude mít hodnotu undefined. Při druhém volání funkci předáváme oba parametry. V prvním parametru je jméno osoby, kterou chceme pozdravit, druhý parametr pak obsahuje text pozdravu.

Nastavení výchozí hodnoty parametru funkce

Abychom se vyvarovali hodnoty undefined při nezadání parametru, můžeme mu při deklaraci funkce nastavit výchozí hodnotu:

function pozdrav(jmeno, textPozdravu = "Dobrý den") {
    document.write(textPozdravu + " " + jmeno + "!<br>");
}
pozdrav("Petře");
pozdrav("Jano", "Ahoj");

Při volání funkce s jedním parametrem bude nyní použit výchozí pozdrav Dobrý den:

Návratová hodnota funkce

Funkce může také vrátit hodnotu, se kterou lze později pracovat. K tomu slouží příkaz return, za nímž uvedeme hodnotu, kterou má funkce vrátit:

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

Funkce pozdrav() vrátí pozdrav i se jménem, které jí předáme. Nyní můžeme vrácenou hodnotu například uložit do proměnné a vypsat ji velkými písmeny:

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

Výsledek:

Výhoda funkcí spočívá v jejich přehlednosti a efektivitě. Umožňují nám napsat určitou část kódu pouze jednou a následně ji prostřednictvím funkce snadno použít opakovaně – klidně i 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říkladu, 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 tři věty a v nějaké bychom mohli udělat chybu.

Uložení funkce do proměnné

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 lekci Úvod do JavaScriptu jsme mluvili o tzv. funkcionálním paradigmatu. Jedná se o specifický styl programování a myšlení pomocí funkcí. Ve skutečnosti jsou všechny funkce v JavaScriptu vnitřně proměnné. Funkci můžeme uložit do běžné proměnné a z této proměnné ji později volat:

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

let promennaSFunkci = pozdrav;

Funkci jsme vytvořili tak, jak jsme zvyklí a následně ji uložili do proměnné promennaSFunkci. Všimněme si však, že na rozdíl od volání funkce zapisujeme při jejím ukládání pouze název bez závorek – ukládáme totiž samotnou funkci, nikoli výsledek jejího volání, jak tomu bylo v předchozích příkladech. Následně můžeme funkci zavolat přes proměnnou, do které jsme ji uložili. Pro zjednodušení si můžeme představit, že jsme funkci dali "přezdívku", a proto je jedno, zda ji "oslovíme" jejím původním jménem nebo použijeme přezdívku ve formě názvu proměnné:

promennaSFunkci("Karle");

Výstup bude stejný, jako kdybychom zavolali pozdrav("Karle");:

Anonymní funkce

U jednorázových úkolů, například při reakci na události v prohlížeči, často není nutné vytvářet samostatnou funkci se jménem. Místo toho můžeme funkci uložit do proměnné rovnou:

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

Tato funkce sama o sobě nemá název, proto ji nazýváme anonymní funkcí. Máme pouze název proměnné, ve které je funkce uložená.

Anonymní funkce si můžeme představit jako nástroj vytvořený na míru pro konkrétní úkol, který už poté pravděpodobně nebudeme znovu potřebovat. Volání přes proměnnou proběhne stejně, jako při uložení pojmenované funkce:

promennaSFunkci("Karle");

JavaScript "vidí" pojmenované funkce předem díky tzv. hoistingu, takže je můžeme volat odkudkoli v kódu, i před jejich deklarací. U anonymních funkcí uložených do proměnných to však neplatí, a proto musí být volány až po jejich deklaraci.

Funkce definované oběma ukázanými způsoby můžeme také předávat jako parametr dalším funkcím. To si ukážeme zejména při obsluze událostí v dalších lekcích.

V následujícím cvičení, Řešené úlohy k 13.-15. 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š.