Funkce jsou jedním ze základních stavebních kamenů JavaScriptu. Obecně můžeme funkce chápat jako pojmenovaný blok kódu, který může být volán opakovaně s různými argumenty.
Funkce v JavaScriptu umožňují definovat kusy kódu, které mohou být volány v jiných částech skriptu. Po definování funkce ji můžete volat kdekoli v kódu, kde je potřeba. Funkce také umožňují importovat funkci z jednoho modulu do jiného modulu. Funkce zjednodušují váš kód, umožňují ho organizovat do snadno použitelných a přehledných částí (modulů).
Oproti jiným programovacím jazykům můžeme funkce v Javascriptu definovat nejméně třemi způsoby. Tyto druhy se liší syntaxí, pojmenováním a dostupností některých objektů uvnitř funkcí. Název funkce (identifikátor) je utf-8 kompatibilní a case-sensitive.
Implementace funkcí v javascriptu
Funkce jsou first class objekty^fco, proto je lze předávat předávat předávat jiným funkcím, vracet z funkcí a přiřazovat proměnným a vlastnostem.
Protože funkce jsou objekty, mohou mít vlastnosti a metody jako každý jiný objekt.
Například mají vlastnost length
, která vrací počet argumentů, s nimiž jsou deklarovány.
Od ostatních objektů se liší tím, že funkce lze volat.
Funkce dědí z objektu Function
.
Exekuční kontext
Interpret JavaScriptu vytvoří nový kontext vždy, když se chystá spustit funkci nebo skript, který jsme napsali. Každý skript/kód začíná s kontextem provádění, který se nazývá globální kontext provádění. A pokaždé, když zavoláme funkci, vytvoří se nový kontext provádění, který se umístí na vrchol zásobníku provádění. Stejný vzorec následuje při volání vnořené funkce, která volá další vnořenou funkci...
Z čeho se skládá funkce
Návratová hodnota
Funkce vrací výraz nebo undefined. Vyjímkou je konstruktor, jehož výchozí návratová hodnota je this.
Volání
Funkce reaguje na počet argumentů, než je uvedených v definici. Pokud funkci voláme s
- s více argumenty, jsou tyto extra argumenty zahozeny.
- s méně argumenty, pak jsou chybějící argumenty definovány jako undefined.
Parametry a argumenty funkcí
Argumenty jsou hodnoty, které se předávají do funkce při jejím volání, zatímco parametry jsou proměnné, které se používají v definici a v těle funkce. Více se dočtete zde.
Pojmenovaná anonymní funkce (function expressions)
Funkce může být taky definovaná jako výraz. Tato definice podobnou syntaxi jako v případě deklarace funkce. Hlavní rozdíl je, že se její definice očekává v místě výrazu, například na pravé straně operátoru přiřazení. Funkce uložené v proměnných nepotřebují název, ale mohou ho mít. Přiřazení neznamená pojmenování. Vždy jsou vyvolány (volány) pomocí názvu proměnné.
const hello = function(x) {
console.log(x);
}
Funkce konstruktoru (function declaration, function statement)
Důležitou vlastností těhle funkcí, že jsou "hoistované" - můžete volat funkci předtím, než je definována v kódu.
Konstruktory
Konstruktor je speciální typ funkce, který se používá k vytvoření nové instance objektu. První verze JS neměly třídy. Můžete však podobnou funkcionalitu jako třídy dosáhnout pomocí funkcí.
I když konstruktory patří spíše do světa objektů, definují se klíčovým slovem function
, za kterým následuje jméno/identifikátor funkce.
Je dobrou konvencí pojmenovávat je jako třídy, tedy s velkým počátečním písmenem (např. "Person" nebo "Animal").
Konstruktor má za identifikátorem parametry, které se používají k inicializaci vlastností nové instance objektu.
Tělo funkce se pak uvádí v bloku (složených závorkách). Zde je jednoduchý příklad deklarace funkce:
function Foo(param) {
console.log(param);
}
Konstruktor se pak volá pomocí klíčového slova "new" před názvem funkce a výsledkem volání je pak nový objekt, např.
var person = new Foo()
Konstruktor také může mít kód, který se provede při vytvoření nové instance objektu, např. "this.name = name" k přiřazení hodnoty parametru "name" do vlastnosti "name" nové instance objektu.
Měli bychom chápat rozdíl, jakým se zachází s funkcemi a třídami. Všimněte si, jak používáme operátor new při volání třídy:
// Pokud je pozdrav funkcí
const result = Pozdrav(a); // <p>Dobrý den</p>
// Pokud je pozdrav třída
const instance = new Greeting(rekvizity);// Pozdrav {}
const result = instance.render(); // <p>Dobrý den</p>
Operátor new
zcela ignoruje návratovou hodnotu funkce, pokud se nejedná o objekt.
Rozdíl mezi definicí funkce a pojmenovanou funkcí
Existuje několik různých případu, ve kterých se funkční výrazy stávají užitečnějšími, než deklarace funkcí:
- closures
- argumenty jiné funkce
Function declarations jsou viditelné v celém scope, ve kterém byly definovány (včetně bloků, ve kterých jsou obsaženy). Na druhou stranu, function expressions definované pomocí let a const jsou omezeny na blok, ve kterém jsou definovány.
Ostatní funkce
V JS máme anonymní funkce, Arrow funkce, generatory, async funkce a konstruktor. Anonymní funkce, které nejsou pojmenované (nemají identifikátor) a mohou se přiřadit jako callback nebo přiřadit do proměnné.
Arrow funkce
Arrow function jsou zkrácený zápis pro anonymní funkce a věnujeme jim samostatné téma.
Arrow funkce nemají vlastní this
. Běžně při programování se nám často stává, že skládáme funkce do sebe.
A v těle vnitřní funkce máme k dispozici this
kontext oné funkce a to se snažíme potlačit voláním this.bind(this)
.
Stručnost syntaxe arrow funkce je praktická, zejména když ji využíváme jako higher-order funkce a je určena pro jednoduché funkce.
var hello = (x) => console.log(x);
Generátory a další
Generator funkce poskytuje speciální možnosti pro generator výstupu. Async funkce se používají pro asynchronní kód a konstruktor se používá pro vytváření nových objektů.