Šipkové funkce

JavaScript má ještě jeden, kratší způsob zápisu funkcí: šipkové funkce (anglicky arrow functions). Potkáte je skoro v každém programu v JavaScriptu a v lekci o webových stránkách je budete používat i vy. Tady je stejná funkce zapsaná oběma způsoby. Nejdřív tak, jak to znáte:

function secti(a, b) {
    return a + b;
}

A jako šipková funkce:

const secti = (a, b) => a + b;

Projděme si šipkovou funkci po částech:

• const secti =: šipková funkce se píše bez názvu, a tak ji uložíme do proměnné. Funkce pak nese název této proměnné. Funkce je v JavaScriptu hodnota, stejně jako číslo nebo text, a proto ji můžeme uložit do proměnné. Používáme const, protože v proměnné bude pořád stejná funkce.
• (a, b): parametry, jako obvykle v závorkách.
• =>: šipka, tedy rovnítko a za ním znak větší než. Odděluje parametry od těla funkce.
• a + b: tělo funkce. Když za šipkou nejsou složené závorky, funkce hodnotu za šipkou vrátí sama, bez return.

Šipkovou funkci voláte stejně jako každou jinou funkci:

const secti = (a, b) => a + b;

console.log(secti(2, 3));

Tento kód vypíše:

5

Když funkce potřebuje víc řádků, dejte její tělo do složených závorek, stejně jako u funkce zapsané pomocí function. Se složenými závorkami ale musíte return napsat sami:

const obsahObdelniku = (sirka, vyska) => {
    const obsah = sirka * vyska;
    return obsah;
};

console.log(obsahObdelniku(4, 3));

Tento kód vypíše:

12

Všimněte si středníku za zavírací }. Celá funkce je hodnota proměnné vytvořené pomocí const a takový příkaz končí středníkem, stejně jako const cena = 45;.

Pozor na dvě časté chyby:

• Složené závorky bez return. const secti = (a, b) => { a + b }; součet spočítá, ale nevrátí, takže secti(2, 3) dá undefined.
• Volání funkce nad řádkem, který ji vytváří. Dokud se tento řádek neprovede, funkce v proměnné secti není, a tak dostanete chybu ReferenceError: Cannot access 'secti' before initialization (k proměnné nelze přistupovat dřív, než se vytvoří).

Můžete se setkat i se šipkovou funkcí s jedním parametrem bez závorek, třeba cislo => cislo * 2. Znamená to totéž jako (cislo) => cislo * 2.