Anonymní funkce

V tomto tutoriálu jsme doposud vytvářeli pouze funkce s názvem. A můžete si myslet: Samozřejmě, že mají název, jinak bychom nevěděli, jak je volat. A máte naprostou pravdu - pokud potřebujete být schopni funkci později manuálně volat, musí mít název.

Existuje mnoho způsobů, jak v JavaScriptu používat funkce, a některé z nich skvěle fungují s takzvanou anonymní funkcí. Nejčastějším případem použití je pravděpodobně, když potřebujete předat funkci jako parametr jiné funkci, což se často označuje jako zpětná volací funkce (callback).

Použití anonymní funkce

V JavaScriptu pro webový prohlížeč najdeme alespoň dvě funkce, které umožňují předat zpětnou volací funkci (více o těchto v dalším článku). Jmenují se setTimeout() a setInterval() a jsou často používány webovými vývojáři. Podrobně se jim budeme věnovat později v tomto tutoriálu, ale prozatím jsou zde, aby demonstrovaly, jak lze použít anonymní funkci.

Ale nejprve se podívejme, jak by to vypadalo, kdybychom deklarovali pojmenovanou funkci a poté tu funkci předali funkci setTimeout():

function SaySomething()
{
	alert("Hello, world!");
}

setTimeout(SaySomething, 1000);

Je to poměrně jednoduché: Deklarujeme funkci, nazvanou SaySomething(), a poté zavoláme funkci setTimeout(), předáme dva argumenty: Název funkce, která má být zavolána, a zpoždění v milisekundách, než se to má stát. V tomto případě jsem specifikoval zpoždění 1 sekundy (1000 milisekund), takže když uplyne 1 sekunda, funkce SaySomething() je zavolána.

To funguje dobře, ale velmi často nebudete potřebovat tuto funkci volat odkudkoli jiného, takže opravdu není důvod, aby zbytečně zatěžovala váš kód. Místo toho můžeme použít anonymní funkci, vytvořenou na místě a pouze pro toto konkrétní volání setTimeout(). Takhle to vypadá:

setTimeout(function() { alert("Hello, world!"); }, 1000);

Všimněte si, že to vypadá jako běžná funkce, ale není zde žádný název. To je perfektní příklad situace, kdy má anonymní funkce smysl.

Výrazy funkcí

V JavaScriptu jsou funkce první kategorií a ne nějakou magickou konstrukcí, jak je vidět v jiných programovacích jazycích. To také znamená, že můžete funkci přiřadit k proměnné, dokonce i anonymní funkci, takto:

let func = function() 
{
	alert("Hello, world!");
};

func();

Všimněte si, jak deklaruji proměnnou nazvanou func a ihned jí přiřadím anonymní funkci. To mi nyní umožní tuto funkci volat jednoduše přidáním sady závorek k názvu proměnné, jak to dělám v posledním řádku příkladu.

Jako malou zajímavost, fakt, že jste nyní uložili funkci do proměnné, vám ve skutečnosti umožňuje získat kód funkce. Pokud spustíte následující příklad, uvidíte to na vlastní oči:

let func = function() 
{
	alert("Hello, world!");
};

alert(func);

Všimněte si, že jsem nyní vynechal závorky při přístupu k proměnné func v posledním řádku, protože ji používáme jako hodnotu namísto funkce.

Šipkové funkce (arrow functions)

Syntaxe výrazu šipkové funkce byla představena ve specifikaci ES6 v roce 2015, takže je dnes podporována všemi moderními prohlížeči. Je to opravdu jen syntaktická zkratka, kterou můžete použít, například, když potřebujete použít anonymní funkci. Takto to vypadá:

let func = () => alert("Hello, world!");

func();

Jak vidíte, název pochází z operátoru podobného šipce =>. Tato syntaxe je nyní ještě kratší než dříve, ale samozřejmě v tomto případě je to také extrémně jednoduchá funkce. Šipkové funkce mohou také přijímat parametry a ve výchozím stavu vrátí výsledek příkazu, takto:

let add100 = n => n + 100;

alert(add100(42));

Všimněte si, že jsem nyní vynechal závorky, ale přidal parametr nazvaný n. Také si všimnete, že nemusím používat klíčové slovo return - pokud je to možné, JavaScript jednoduše vrátí výsledek příkazu. V tomto příkladu je vstup (n) vrácen, po přičtení 100 k němu.

Na druhou stranu, pokud máte více parametrů, nemůžete vynechat závorky, a pokud vaše funkce obsahuje více než jeden příkaz, budete muset také použít klíčové slovo return. Zde je příklad:

let sum = (n1, n2) => 
{
	if((isNaN(n1)) || (isNaN(n1)))
		alert("Both parameters must be numbers!");
	return n1 + n2;
};

alert(sum(40, 2));

Šipkové funkce jsou obzvláště praktické, když se používají jako zpětné volací funkce. Zde je přepsaná verze předchozího příkladu v tomto článku, kde používáme šipkovou funkci:

setTimeout(() => alert("Hello, world!"), 1000);

Takže ušetříte několik stisků kláves oproti verzi s klíčovým slovem function, ale zda dáváte přednost této kratší verzi, je pravděpodobně otázkou vkusu.

Všimněte si prosím, že šipkové funkce nepodporují klíčové slovo this a proto by neměly být používány pro metody objektů/tříd.

Shrnutí

Anonymní funkce mohou být velmi praktické, když je nepotřebujete později odkazovat, například když potřebujete dodat zpětnou volací funkci. Mohou být použity s klíčovým slovem function, jako běžná funkce, nebo v kratší verzi se syntaxí šipkové funkce, v závislosti na vašich osobních preferencích.