Šipkové funkce (ECMA6 arrow function)

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 vývojářské nástroje (např. Firebug), protože tam stačí vědět, že prohlížeč je aktualizován na verzi, která ES6 podporuje.

Výpis do konzole

Ve vývojářských nástrojích často potřebujete vypsat obsah nějaké proměnné do konzole:

> window.isIe
 true

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é závorky ani klíčová slova:

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

Šipková funkce totiž automaticky vrátí hodnotu výrazu, tak jako je tomu např. v konzoli nebo funkci eval().

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):

> binpower = i => Math.pow(2, i) 
> binpower(3)
 8
> binpower(10)
 1024

Jednoduše bez psaní závorek a klíčových slov máte funkci, kterou si můžete spočítat mocniny dvou.

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

Podobně jednoduše 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.

Složitější funkce

Zatím jsme všechny funkce psali tak, že obsahovali jeden parametr a jeden příkaz. V takovém případě se obejdete bez závorek.

Pokud však potřebujete dát funkci více parametrů, musíte je dát do kulatých závorek:

> $('#login input').map((e, i)
    => 'input ' + i + ' je ' + e.attr('type'));
 ['input 1 je text', 'input 2 je password', ...]

Závorky můžete použít i v případě, že funkce nemá mít žádné parametry. Ale z praktického hlediska – když už jste líní psát function a return – je lepší zapsat jedno písmenu coby nepotřebný parametr než psát dvě závorky (z nichž většinou minimálně jednu musíte napsat se SHIFTem):

> $('input').on('keydown', ()=> alert('key'))

//tohle je rychlejší napsat:
> $('input').on('keydown', k => alert('key'))

Stejně tak, pokud potřebujete složitější funkci, která má více příkazů, je potřeba je zavřít do složených závorek:

> $('input').on('keydown', k => {
     alert('key'); return false; })

Při použití složených závorek již ale nefunguje to, že vytvořená funkce automaticky vrátí hodnotu výrazu a potřeba přímo použít klíčové slovo return.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..