Funkční výrazy

Funkce v JavaScriptu není nějaká „magická jazyková struktura“, ale speciální druh hodnoty.

Syntaxe, kterou jsme dosud používali, se nazývá deklarace funkce:

function řekniAhoj() {
  alert( "Ahoj" );
}

Existuje i jiná syntaxe pro vytváření funkce, která se nazývá funkční výraz.

Ten nám umožňuje vytvořit novou funkci uprostřed libovolného výrazu.

Například:

let řekniAhoj = function() {
  alert( "Ahoj" );
};

Zde vidíme promÄ›nnou řekniAhoj, do níž je uložena hodnota, kterou je nová funkce, vytvoÅ™ená jako function() { alert("Ahoj"); }.

Protože k vytvoÅ™ení funkce dochází v kontextu pÅ™iÅ™azovacího výrazu (na pravé stranÄ› =), je to funkční výraz.

Prosíme vÅ¡imnÄ›te si, že za klíčovým slovem function není žádný název. Ve funkčních výrazech je vynechání názvu dovoleno.

Zde okamžitÄ› pÅ™iÅ™azujeme funkci promÄ›nné, takže význam tohoto příkladu kódu je stejný: „vytvoÅ™ funkci a ulož ji do promÄ›nné řekniAhoj“.

V pokročilejších situacích, na které narazíme později, můžeme funkci vytvořit a okamžitě volat nebo naplánovat její pozdější spuštění, aniž bychom ji někam uložili, takže funkce zůstane anonymní.

Funkce je hodnota

Zopakujme si: bez ohledu na to, jak je funkce vytvoÅ™ena, funkce je hodnota. V obou výše uvedených příkladech je funkce uložena do promÄ›nné řekniAhoj.

Tuto hodnotu dokonce můžeme zobrazit pomocí alert:

function řekniAhoj() {
  alert( "Ahoj" );
}

alert( řekniAhoj ); // zobrazí kód funkce

VÅ¡imnÄ›te si, že poslední řádek nevolá funkci, protože za řekniAhoj nejsou závorky. Existují programovací jazyky, v nichž je funkce zavolána pokaždé, když je uveden její název, ale to není případ JavaScriptu.

V JavaScriptu je funkce hodnota, takže s ní můžeme zacházet jako s hodnotou. Výše uvedený kód zobrazí její řetězcovou reprezentaci, kterou je zdrojový kód funkce.

SamozÅ™ejmÄ›, funkce je speciální hodnota v tom smyslu, že ji můžeme volat, napÅ™. řekniAhoj().

Je to však stále hodnota, a proto s ní můžeme pracovat jako s hodnotou jakéhokoli jiného druhu.

Můžeme zkopírovat funkci do jiné proměnné:

function řekniAhoj() {   // (1) vytvoření
  alert( "Ahoj" );
}

let funkce = řekniAhoj;  // (2) zkopírování

funkce(); // Ahoj        // (3) spustíme kopii (funguje to!)
řekniAhoj(); // Ahoj     //     i tohle stále funguje (proč by nemělo)

Co se v uvedeném příkladu přesně stane:

1. Deklarace funkce (1) vytvoří funkci a uloží ji do promÄ›nné nazvané řekniAhoj.
2. Řádek (2) ji zkopíruje do promÄ›nné funkce. OpÄ›t si vÅ¡imnÄ›te, že za řekniAhoj nejsou závorky. Kdyby tam byly, příkaz funkce = řekniAhoj() by zapsal do promÄ›nné funkce výsledek volání řekniAhoj, ne samotnou funkci řekniAhoj.
3. Nyní můžeme tuto funkci volat pomocí řekniAhoj() i pomocí funkce().

Na prvním řádku jsme mohli deklarovat řekniAhoj i pomocí funkčního výrazu:

let řekniAhoj = function() { // (1) vytvoření
  alert( "Ahoj" );
};

let funkce = řekniAhoj; // (2)
// ...

VÅ¡echno bude fungovat stejnÄ›.

function řekniAhoj() {
  // ...
}

let řekniAhoj = function() {
  // ...
};

Funkce zpětného volání (callbackové funkce)

Podíváme se na další příklady předávání funkcí jako hodnot a používání funkčních výrazů.

Napíšeme funkci zeptejSe(otázka, ano, ne) se tÅ™emi parametry:

otázka

Text otázky

ano

Funkce, která se spustí, je-li odpověď „ano“

ne

Funkce, která se spustí, je-li odpověď „ne“

Funkce by mÄ›la položit otázku otázka a pak podle odpovÄ›di uživatele zavolat ano() nebo ne():

function zeptejSe(otázka, ano, ne) {
  if (confirm(otázka)) ano()
  else ne();
}

function zobrazOK() {
  alert( "Souhlasil jste." );
}

function zobrazStorno() {
  alert( "Zrušil jste provádění." );
}

// použití: funkce zobrazOK, zobrazStorno jsou předány funkci zeptejSe jako argumenty
zeptejSe("Souhlasíte?", zobrazOK, zobrazStorno);

V praxi jsou takové funkce pomÄ›rnÄ› užitečné. Hlavním rozdílem mezi zeptejSe ve skutečném životÄ› a uvedeným příkladem je, že skutečné funkce používají složitÄ›jší způsoby interakce s uživatelem, než pouhé confirm. V prohlížeči taková funkce obvykle vykreslí pÄ›kné dotazovací okno. To je vÅ¡ak jiný příbÄ›h.

Argumenty zobrazOK a zobrazStorno funkce zeptejSe se nazývají callbackové funkce nebo jednoduÅ¡e callbacky.

MyÅ¡lenkou je, že pÅ™edáme funkci a očekáváme, že bude „zpÄ›tnÄ› volána“ (call = volání, back = zpÄ›t) pozdÄ›ji, až to bude nutné. V naÅ¡em případÄ› zobrazOK se stala callbackem pro odpověď „ano“ a zobrazStorno pro odpověď „ne“.

Pomocí funkčních výrazů můžeme napsat ekvivalentní, ale kratší funkci:

function zeptejSe(otázka, ano, ne) {
  if (confirm(otázka)) ano()
  else ne();
}

zeptejSe(
  "Souhlasíte?",
  function() { alert("Souhlasil jste."); },
  function() { alert("Zrušil jste provádění."); }
);

Zde jsou funkce deklarovány přímo ve volání zeptejSe(...). Nemají žádný název, a tak se nazývají anonymní. Takové funkce nejsou dostupné mimo zeptejSe (protože nejsou pÅ™iÅ™azeny žádným promÄ›nným), ale to je pÅ™esnÄ› to, co tady chceme.

Takový kód se v našich skriptech objevuje zcela přirozeně a je přesně v duchu JavaScriptu.

Funkční výrazy vs. deklarace funkcí

Zformulujme nyní základní rozdíly mezi deklaracemi funkcí a funkčními výrazy.

První rozdíl je syntaxe: jak je rozlišovat v kódu.

• Deklarace funkce: funkce deklarovaná samostatným příkazem v hlavním toku kódu:

  // deklarace funkce
  function součet(a, b) {
    return a + b;
  }

• Funkční výraz: funkce vytvoÅ™ená uprostÅ™ed výrazu nebo uvnitÅ™ jiného syntaktického konstruktu. Zde je funkce vytvoÅ™ena na pravé stranÄ› „operátoru pÅ™iÅ™azení“ =:

  // funkční výraz
  let součet = function(a, b) {
    return a + b;
  };

Jemnější rozdíl spočívá v tom, kdy přesně je funkce vytvořena enginem JavaScriptu.

Funkční výraz je vytvořen ve chvíli, kdy k němu dospěje vykonávání kódu, a je použitelný až od této chvíle.

Jakmile se provádÄ›ní skriptu dostane k pravé stranÄ› pÅ™iÅ™azení let součet = function… – v tom okamžiku je funkce vytvoÅ™ena a od nynÄ›jÅ¡ka může být používána (pÅ™iÅ™azena, volána apod.).

Deklarace funkcí jsou odlišné.

Deklarovaná funkce může být volána ještě dříve, než je definována.

Například globální deklarace funkce je viditelná v celém skriptu, ať se nachází kdekoli.

Je to způsobeno vnitřními algoritmy. Když JavaScript připravuje spuštění skriptu, nejprve v něm najde globální deklarace funkcí a tyto funkce vytvoří. Můžeme to považovat za „přípravnou fázi“.

Teprve až jsou všechny deklarace funkcí zpracovány, kód se vykoná. Proto má k těmto funkcím přístup.

Například toto funguje:

řekniAhoj("Jan"); // Ahoj, Jan

function řekniAhoj(jméno) {
  alert( `Ahoj, ${jméno}` );
}

Deklarace funkce řekniAhoj se vytvoří, když JavaScript pÅ™ipravuje spuÅ¡tÄ›ní skriptu, a je v nÄ›m vÅ¡ude viditelná.

…Kdyby to však byl funkční výraz, nefungovalo by to:

řekniAhoj("Jan"); // chyba!

let řekniAhoj = function(jméno) {  // (*) už žádná magie
  alert( `Ahoj, ${jméno}` );
};

Funkční výrazy se vytvoří, když k nim dorazí vykonávání kódu. To se stane až na řádku (*). PozdÄ›.

Další speciální vlastností deklarací funkcí je blok jejich platnosti.

Ve striktním režimu platí, že když je deklarace funkce umístěna v bloku kódu, je viditelná všude uvnitř tohoto bloku, ale ne mimo něj.

Například si pÅ™edstavme, že potÅ™ebujeme deklarovat funkci uvítání(), která závisí na promÄ›nné věk, kterou získáme za bÄ›hu skriptu. A pak ji plánujeme použít o nÄ›co pozdÄ›ji.

Kdybychom použili deklaraci funkce, nefungovalo by to tak, jak zamýšlíme:

let věk = prompt("Kolik je vám let?", 18);

// podmíněná deklarace funkce
if (věk < 18) {

  function uvítání() {
    alert("Ahoj!");
  }

} else {

  function uvítání() {
    alert("Dobrý den!");
  }

}

// ...použijeme ji později
uvítání(); // Chyba: uvítání není definováno

Je to proto, že deklarace funkce je viditelná jedině uvnitř bloku kódu, v němž se nachází.

Další příklad:

let věk = 16; // vezmeme 16 jako příklad

if (věk < 18) {
  uvítání();               // \   (spustí se)
                           //  |
  function uvítání() {     //  |
    alert("Ahoj!");        //  |  deklarace funkce je k dispozici
  }                        //  |  všude v bloku, v němž je funkce deklarována
                           //  |
  uvítání();               // /   (spustí se)

} else {

  function uvítání() {
    alert("Zdravíme vás!");
  }
}

// Tady už jsme mimo složené závorky,
// takže nevidíme deklarace funkcí, které se nacházejí uvnitř nich.

uvítání(); // Chyba: uvítání není definováno

Jak můžeme uvítání učinit viditelným i mimo if?

Správný přístup by byl použití funkčního výrazu a pÅ™iÅ™azení uvítání do promÄ›nné, která je deklarována mimo if a má náležitou viditelnost.

Tento kód funguje tak, jak zamýšlíme:

let věk = prompt("Kolik je vám let?", 18);

let uvítání;

if (věk < 18) {

  uvítání = function() {
    alert("Ahoj!");
  };

} else {

  uvítání = function() {
    alert("Dobrý den!");
  };

}

uvítání(); // nyní je to v pořádku

Nebo to můžeme jeÅ¡tÄ› zjednoduÅ¡it pomocí operátoru otazníku ?:

let věk = prompt("Kolik je vám let?", 18);

let uvítání = (věk < 18) ?
  function() { alert("Ahoj!"); } :
  function() { alert("Dobrý den!"); };

uvítání(); // nyní je to v pořádku

Shrnutí

• Funkce jsou hodnoty. Kdekoli v kódu je můžeme pÅ™iÅ™azovat, kopírovat nebo deklarovat.
• Je-li funkce deklarována samostatným příkazem v hlavním kódu, nazývá se to „deklarace funkce“.
• Je-li funkce vytvoÅ™ena jako součást výrazu, nazývá se to „funkční výraz“.
• Deklarace funkcí se zpracovávají jeÅ¡tÄ› pÅ™edtím, než je blok kódu vykonán. Jsou tedy viditelné vÅ¡ude v celém bloku.
• Funkční výrazy se vytvoří až ve chvíli, kdy k nim dorazí výkon kódu.

Ve většině případů, kdy potřebujeme deklarovat funkci, dáváme přednost deklaraci funkce, protože pak je funkce viditelná ještě před samotnou deklarací. To nám dává více možností při organizaci kódu a je to zpravidla čitelnější.

Funkční výrazy bychom tedy měli používat jen tehdy, když nám pro naše účely deklarace funkce nestačí. V této kapitole jsme viděli několik takových příkladů a v budoucnu uvidíme další.