Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 14 - 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 a callbacky.

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 (neopakujme se) – Zkratka DRY označuje Do not 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á jen něco vypíše. Funkci deklarujeme pomocí klíčového slova function. Za ním následuje název funkce a závorky. Tělo funkce je potom vloženo do bloku ze složených závorek.

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.

Funkci pojmenujeme podle toho, co dělá, její název tedy obsahuje sloveso v rozkazovacím způsobu. Jakmile funkci někde deklarujeme, můžeme ji volat. Uděláme to jednoduše napsáním jejího názvu a závorek. 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!");
}

Poté funkci zavoláme:

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

pozdrav(); // zavolání funkce

Výsledek:

Funkce v JavaScriptu
localhost

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ějme 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

Kdybychom nyní chtěli pozdravit několik lidí, stačí pouze vícekrát zavolat naši funkci:

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

Výsledek:

Funkce v JavaScriptu
localhost

Funkce může mít více vstupních parametrů oddělených čárkami. Při volání funkce dokonce můžeme některé parametry vynechat. Uvnitř funkce budou mít potom hodnotu undefined:

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

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

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:

Funkce v JavaScriptu
localhost

Nastavení výchozí hodnoty parametru funkce

Pokud bychom chtěli dosadit nějakou výchozí hodnotu parametru v případě, že není zadán, uvedeme ji přímo v deklaraci funkce:

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:

Funkce v JavaScriptu
localhost

Návratová hodnota funkce

Funkce může také 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);

V ukázce ukládáme hodnotu funkce pozdrav() do proměnné text, kterou následně vypíšeme.

Výhoda funkcí je tedy v přehlednosti a úspornosti. Napíšeme nějakou věc jednou a voláme ji pomocí funkce 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ří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é

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 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) {
    return "Ahoj, vřele tě tu vítám " + jmeno + "!";
}

let ulozenaFunkce = pozdrav; // nyní máme v proměnné uloženou funkci pozdrav
let text = ulozenaFunkce("Karle"); // zavoláme funkci pomocí proměnné
document.write(text); //  vypíšeme výstup funkce

Všimněme si, že při ukládání funkce do proměnné, na rozdíl od jejího volání, nepíšeme za jejím názvem závorky.

Výstup:

Tvoje stránka
localhost

Anonymní funkce

Funkci můžeme definovat přímo v přiřazení do proměnné, hovoříme potom o tzv. anonymní funkci, protože nemá jméno. Je často vytvářena a používána pro konkrétní, jednorázové úkoly, například k reakci na určité události v prohlížeči. Představme si anonymní funkce jako nástroj vytvořený na míru pro konkrétní úkol, který už poté nikdy nebudeme potřebovat.

Předchozí příklad upravíme pomocí anonymní funkce takto:

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

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

Program nyní funguje stejně, jen funkci nevoláme přímo, ale z proměnné. V tomto případě nemůžeme funkci zavolat před tím, než je proměnná deklarována.

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 12.-14. 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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 720x (3.13 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Předchozí článek
Textové řetězce v JavaScriptu do třetice - Split a join
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 12.-14. lekci JavaScriptu
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
856 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity