Naučte se

Funkce v JavaScriptu

V Javascriptu jsou funkce velmi mocná a takřka univerzální věc. Oproti jiným programovacím jazykům můžeme funkce v Javascriptu definovat hned třemi způsoby. Tyto tři druhy se liší syntaxí, pojmenováním a způsoby volání.

Funkce deklarace
Funkce
Funkce výrazu
Arrow funkce

Co jsou funkce v javascriptu?

Funkce jsou speciální objekty, které dědí z objektu Function a ten dědí z Object.

    typeof function(){} === 'function'

Funkce jsou first class objekty, což znamená, že lze takový objekt předávat jako arument funkce, používat jej jako návratovou hodnotu funkce, mohou být uloženy v poli nebo být klíčem jiného objektu nebo je lze přiřazovat do proměnných.

Protože funkce jsou objekty, mohou mít členské proměnné. Například mají vlastnost length, která vrací počet argumentů, s nimiž jsou deklarovány.

Název funkce je utf-8 kompatibilní a case-sensitive.

Vlastnosti funkcí

Návratová hodnota

Funkce vrací výraz nebo undefined. Vyjímkou je konstruktor, jehož výchozí návratová hodnota je this.

Volání

  • Pokud funkci voláme s více argumenty, než má zadefinováno, jsou tyto extra argumenty zahozeny.
  • Pokud voláme funkci s méně argumenty, než je zadefinováno, pak jsou chybějící argumenty definovány jako undefined.

Hoisting

Deklarace funkcí se načtou před spuštěním libovolného kódu (hoisting), zatímco výrazy funkcí se načtou, až interpreter dojde na příslušný řádek kódu, kde se definuje.

Scope

Blokový scope je běžná věc, scope funkce nemusí být tolik znám. Scope funkce je inkapsulační jednotka, vymezuje viditelnost proměnných

Funkce konstruktoru (function declaration, function statement)

Každá deklarace funkce začíná klíčovým slovem function a musí mít název, za nám následují argumenty funkce v závorkách a nakonec tělo funkce. Bez názvu by neexistoval způsob, jak odkazovat na definovanou funkci. Zde je jednoduchý příklad deklarace funkce:

    function hello(x) {
        console.log(x);
    }

Konstruktory jsou funkce, které při volání ve spojení s klíčovým slovem new vrátí nový objekt. Pokud chcete použít funkci jako konstruktor, konvence je použít první velké písmeno.

Pojmenovaná 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);
    }

Rozdíl mezi deklarací 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
  • Immediately Invoked Function Expressions (IIFE)

Arrow funkce

Před arrow funkcemi se při každém volání funkce vytvořila speciální proměnná this a přidala se do scope. To, čemu se tato proměnná rovnala, záviselo na způsobu volání funkce. Když jste ji zavolali pomocí .call(x), .apply(x) nebo jako metodu nad x, this se rovnala x.

Od verze ECMAScript 2015 je v JavaScriptu podpora arrow funkcí, které jsou hlavně syntaktickým cukrem pro definování funkce výrazu. Stručnost syntaxe arrow funkce je praktická, zejména když ji využíváme jako higher-order funkce.

var hello = (x) => console.log(x);

Při běžném programování se nám stává, že skládáme funkce do sebe. V těke funkce máme k dispozici this kontext, někdy ale chceme přistupovat k this rodičovské funkce. Arrow funkce má praktickou výhodu, že bindují aktuální this hodnotu.

Mezi funkcemi šipek a výrazy funkcí však existují dva hlavní rozdíly:

  • Arrow funkce nelze pojmenovat. Syntaxe funkce šipky je stručná a je určena pro jednoduché funkce.
  • Arrow funkce lexikálně bindují aktuální this hodnotu.

Související