Úvod

V programování je funkce obvykle definována jako kus funkcionality s příslušným názvem, aby bylo možné ji volat vícekrát, místo aby bylo nutné psát stejný kód znovu a znovu. Když zohledníte funkcionality jako parametry a návratové hodnoty, opravdu pochopíte, proč by funkce měly být nezbytnou součástí vašeho nástrojového boxu, ale na to se podíváme později.

Nejprve ilustrujme, jak funkce může dělat to, co jsme právě popisovali: Vykonávat konkrétní úkol tolikrát, kolik chcete, aniž byste museli pokaždé psát stejné řádky kódu. Řekněme, že chcete uživateli v určitých podmínkách zobrazit chybovou zprávu. Můžete jednoduše zavolat metodu alert() se svou zprávou:

alert("Sorry, your input is invalid - please try again!");

Psaní všeho toho textu pokaždé je obtížné, takže místo toho pro to definujme funkci.

Definování a volání funkce

Ve JavaScriptu je definování funkce poměrně jednoduché - stačí použít klíčové slovo function, následované názvem, sadou závorek a poté blokem kódu, který má funkce vykonat. Zde je příklad, založený na výše popsaném případu použití:

function ShowError()
{
	alert("Sorry, your input is invalid - please try again!");
}

Nyní máme funkci nazvanou ShowError(), kterou můžeme zavolat kdykoli chceme uživateli zobrazit naši chybovou zprávu. A volání funkce v JavaScriptu je tak jednoduché, jak napsání jejího názvu následovaného závorkami a jak bylo zmíněno, můžete ji zavolat, kolikrát chcete:

function ShowError()
{
	alert("Sorry, your input is invalid - please try again!");
}

ShowError();
ShowError();
ShowError();

Parametry funkce

Když se podíváte na výše uvedený příklad, možná si řeknete: "Ale co kdybych chtěl zprávu přizpůsobit?". To je skvělá otázka a právě zde se ukazuje jedna z opravdových sil funkcí, protože naši funkci můžeme udělat mnohem chytřejší tím, že jí umožníme přijímat vstupy.

Když předáváte informace funkci v programování, označuje se to jako parametry (nebo někdy argumenty), a jako ten, kdo funkci definuje, můžete také definovat parametry, které může přijímat. Pojďme zkusit definovat funkci s parametrem pro validaci uživatelského vstupu:

function ValidateAge(age)
{
	if(age < 18)
		alert("Sorry, you have to be 18 years or older!");
	if(age > 120)
		alert("Sorry, that's too old!")
}

var age = prompt("Please input your age:");
ValidateAge(age);

Nyní jsme definovali funkci nazvanou ValidateAge(), a všimnete si, že jsem přidal něco mezi závorky: Parametr, který se nazývá age. Tímto způsobem mohu nyní odkazovat na tento parametr uvnitř funkce, jak mě vidíte dělat. Předání parametru je stejně jednoduché - stačí vložit hodnotu do závorek, jak mě vidíte dělat v posledním řádku příkladu.

Návratové hodnoty funkce

V některých programovacích jazycích by funkce, které jsme právě použili, nebyly nazývány funkcemi, ale procedurami. Rozdíl spočívá v tom, že procedura něco provádí bez toho, aby něco vracela, zatímco funkce by měla mít návratovou hodnotu. V JavaScriptu to ale opravdu takto nerozlišujeme - funkce může vrátit hodnotu nebo ne, na tom nezáleží.

Ale schopnost vrátit hodnotu je další z těch věcí, které dělají funkce tak užitečnými! Například nám to umožňuje přepsat naši validační funkci z předchozího příkladu tak, aby byla univerzálnější - místo komunikace s uživatelem si tuto část nechme na sobě a funkci použijme pouze k tomu, abychom zjistili, zda je věk platný nebo ne. To vám umožní použít funkčnost na různých místech a reagovat různě v závislosti na situaci. Zde je přepsaná verze:

function IsValidAge(age)
{
	if((age < 18) || (age > 30))
		return false;
	return true;
}

var age = prompt("Please input your age:");
if(IsValidAge(age))
	alert("Welcome to the disco!");
else
	alert("Sorry, that age is not allowed here!");

Naše funkce nyní jednoduše kontroluje, zda dodaný parametr věku je mezi 18 a 30 lety - pokud ne, vrátíme false pomocí klíčového slova return. V opačném případě vrátíme true. Když funkci zavoláme, můžeme nyní reagovat na výsledek a mít plnou kontrolu nad tím, co se stane dále.

Obor platnosti funkce

Obor platnosti je důležitým aspektem většiny programovacích jazyků a je obzvláště relevantní diskutovat jej v souvislosti s funkcemi. Doposud jsme se většinou bavili o globálních proměnných, kde globální část odkazuje na fakt, že k proměnným je možné přistupovat ze všech částí vašeho kódu.

Nicméně když vstoupíte do vnitřního těla funkce, vstupujete také do nového oboru platnosti. Při deklaraci proměnné ve funkci nebo při odkazování na jeden z parametrů používáte něco, co je dostupné pouze, dokud jste uvnitř funkce. Současně můžete stále přistupovat k členům (např. proměnným nebo jiným funkcím) deklarovaným mimo funkci. Podívejte se na tento příklad:

let n1 = 5, n2 = 10;

function DoStuff()
{
	let n2 = 42;
	alert("Value of n2 (function scope): " + n2);
	n1 = 42;
}

DoStuff();
alert("Value of n1 (global scope): " + n1);
alert("Value of n2 (global scope): " + n2);

Deklaruji dvě proměnné, n1 a n2, a nastavím je na 5 a 10. Poté definuji funkci, kde definujeme proměnnou nazvanou n2 - toto jméno jsme již použili, ale protože jsme nyní v novém oboru platnosti, můžeme ji definovat znovu. Hodnotu n2 nastavíme uvnitř funkce na 42, použijeme alert(), abychom dokázali, že se skutečně změnila, a poté změníme hodnotu globální proměnné n1 na 42.

Mimo deklaraci funkce funkci vyvoláme a poté vypíšeme hodnoty n1 a n2 pomocí alertu. Jak vidíte, změnila se pouze hodnota n1 na 42 - globální verze n2 stále má hodnotu 10, protože jsme provedli změny pouze na té, která byla definována uvnitř oboru platnosti funkce:

Value of n2 (function scope): 42
Value of n1 (global scope): 42
Value of n2 (global scope): 10

Porozumění oboru platnosti, zejména při práci s funkcemi a třídami, je velmi důležité. Doufám, že výše uvedený příklad to učinil trochu jasnějším.

Shrnutí

Funkce vám umožňují obalovat a znovu používat funkcionalitu z více míst. Funkcionalita funkce může být přizpůsobena přijímáním vstupů ve formě parametrů a může buď pouze provádět akci, nebo vracet nějaký druh výsledku na základě kódu funkce.

To byl jen stručný úvod do nejzákladnějších aspektů funkcí v JavaScriptu. V dalších článcích se ponoříme hlouběji do pokročilejších částí funkcí.