Definice funkcí v JavaScriptu

AndreaAndrea

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ů.