Nejnovější prohlížeče podporující ECMAscript 6 (též zvané ES6 nebo ECMAScript 2015) přináší novou jednodušší možnost psaní funkcí.

Vzhledem k tomu, že nová syntaxe není zpětně kompatibilní se staršími prohlížeči, nemůžete ji snadno začít používat v JS souborech. A psát každou funkci dvakrát jen proto, že ji v jednom případě můžete napsat rychleji je dost kontraproduktivní.

Kde ji ale můžete začít používat hned, jsou servvery (NodeJS), moduly (<module>), Služby (Worker a Service Worker) a vývojářské nástroje (např. Debugger console), protože ta stačí vědět, že máte správnou verzi (Node, prohlížeč) a nebo jsou na ES6 přímo závislé (Workery a moduly).

Aktualizováno: březen 2022

Jednoduchá funkce

Šipková funkce s jedním parametrem se zapisuje velice jednoduše a bez zbytečných závorek: jméno parametru, šipka a příkaz, který se má provést:

let binpower = i => Math.pow(2, i);

binpower(3); //== 8
binpower(10); //== 1024

Šipková funkce automaticky vrací výsledek (posledního) příkazu, stejně jako například eval(), takže není potřeba psát ani klíčové slovo return.

Funkci bez parametru napíšete stejně jednodušše tak, že použijete jméno parametru, který pak nepoužijete (nejlépe ‚a‘ nebo ‚i‘):

let init = i => console.log('JS loaded');
document.onload = init;

V některých případech si vystačíte s velice jednoduchou funkcí, která vrací svůj parametr. Nejčastěji se to hodí v kombinaci s Promisy a/nebo klíčovým slovem await, kde návratovou hodnotu zpracovává callback, ale vy ji chcete uložit do proměnné

let data = await fetch(url)
                  .then(response => response)
;

Pokud nejste obeznámeni s použitím Promisů, přečtěte si celý článek o ES6. Zde je důležité pouze to, že funkce fetch() vrací asynchronní Promise, který díky then(), await a šipkové funkci přeměníme na synchronní. A díky tomu, že nemusíme psát klíčová slova function a return je celý příkaz velmi krátká a přehledný.

Poznámka: také se nenechte zmást tím, že ve většině příkladů se uvádí šipková funkce s parametrem, který má jen jedno písmeno – to je proto, že parametr s jedním písmenem se rychleji zapíše a vytváří kratší zápis pro jednořádkovou funkce. Nejde ale o omezení jazyka a pokud potřebujete, je lepší nazvat parametr celým jménem, jako v tomto případě, kde „response => response“ dává větší smysl než kratší „i => i“.

Funkce s podmínkou

Šipková funkce může sloužit i k obalení jednoduché (např. ternární) podmínky:

//vrátí 'unknown' místo undefined
let isKnown = i => i || 'unknown'; 
isKnown(); //== 'unknown'
isKnown(5); //== 5

//vrátí unknown pro nečíselné hodnoty
let isNum = i => isNan(i)?'unknown':parseInt(i); 
isNum(); //== 'unknown'
isNum('5'); //== 5
isNum('a'); //== 'unknown'

Pokud byste chtělil použít IF nebo jinou podmínku, nejde to takto jednoduše – viz dále.

Funkce s více parametry

Pokud chcete vytvořit šipkovou funkci s více parametry, je potřeba je uzavřít do závorek; stále je to ale lepší, než psát celé slovo function:

let add = (a,b) => a + b;
let sum = (a,b,c) => a + b + c;

alert(add(10,5)); //== 15

Pokud se vám nelíbí výše uvedený příklad pro vytvoření funkce bez parametru, který ale má nevyužitý parametr, můžete místo toho použít prázdné závorky:

let init = () => console.log('JS loaded');
document.onload = init;

Na většině klávesnic je ale rychlejší zmáčknou jedno písmeno než psát levou a pravou závorku (z nichž minimálně jedna je obvykle potřeba napsat se SHIFTem).

Funkce s více příkazy

I šipková funkce může obsahovat více příkazů – v tom případě ale musíte uvést složené závorky jako u klasické funkce. Navíc je potřeba i uvést klíčové slovo return pro návrat hodnoty.

let loadJSON = file => { 
                                 let FS = require('fs'); //příkklad z NodeJS
                                 let data;
                                 await FS.readFile(file, data => data);
                                 return data;
};

Funkce se složitou podmínkou

Funkci se složenými závorkami je potřeba použít i v případě, že sice obsahuje logicky jedno-řádkový příkaz, který se ale skládá z podmínky nebo cyklu. JS se tím programátory snaží donutit více přemýšlet o tom, co všechno patří do funkce:

//spočte druhou mocninu, ale zachová znaménko záporných čísel
let negPower = a => { if (0 < a) return a*a; else return Math.abs(a)*a; };

Stejně je potřeba použít složené závorky, pokud chcete vytvořit jednoduchou funkci s cyklem:

let fill = (a, cnt) => { for (i = 0; i < cnt; ++i) a[i] = i };

a = [];
fill(a, 5); //a == [0,1,2,3,4]

Poznámka: v těchto relativně jednoduchých případech je možno nepoužít vnořené složené závorky u příkazů (IF, FOR, apod.), i když je obecně doporučeno používat složené závorky u všech podmínek a cyklů, které to umožňují.

Výpis do konzole

Šipkové funkce jsou také velice užitečné ve vývojářských nástrojích, kde často potřebujete vypsat obsah nějaké proměnné do konzole:

//Příklad, který se netýká šipkové funkce, jen ukazuje použití konzole
> window.innerWidth
1900

Pokud ale chcete sledovat, jaké parametry vrací událost, do teď bylo potřeba zdlouhavě psát listener:

> $('input').on('keydown', function(e) {
   console.log('Pressed key: ', e.which); 
});
 ...
 Pressed key: 9
 Pressed key: 13

Díky ES6 si můžete tento zápis zkrátit pomocí šipkové funkce, u které stačí zadat jen jméno parametru a příkaz, který se s ním má provést:

> $('input').on('keydown', e => console.log('Pressed key: ', e.which));
 ...
 Pressed key: 9
 Pressed key: 13

Filtrování objektů

Další častý případ použití konzole je, když máte pole nějakých objektů (např. DOM prvků) a chcete znát hodnoty nějaké proměnné (např. typ inputu). V tomto případě můžete využít jQuery funkci map(), která přemění seznam na vámi zadané hodnoty:

> $('#login input').map(function(i) {
             return i.attr('type'); 
});
['text', 'password', 'submit']

Pomocí ES6 nemusíte psát žádné zbytečné závorky ani klíčová slova:

> $('#login input').map(i => i.attr('type'));
 ['text', 'password', 'submit']

Debugovací funkce

Třetí nejčastější případ, kdy v konzoly píšete funkci, je vytvoření pomocné funkce nebo přepsání stávající funkce pro testovací účely (tzv. mockup):

Jednoduše bez psaní závorek a klíčových slov můžete např. přepsat funkci jQuery.ajax(), a otestovat tak, kde se na vaší stránce volá ajax metoda a s jakými parametry.

> $.ajax = p => console.log('AJAX: ', p)
 ...
 AJAX: {url: '/api', data: {method: 'login'}}