Šipkové funkce v Javascriptu
On 20 listopadu, 2021 by admin
Šipkové funkce – nazývané také „tlusté šipky“, jsou relativně novým způsobem zápisu stručných funkcí v jazyce JavaScript. Byly zavedeny specifikací ECMAScript 6 a od té doby se staly nejpopulárnější funkcí ES6. Šipkové funkce nám umožňují používat operátor tlusté šipky => k rychlému definování funkcí jazyka JavaScript s parametry nebo bez nich. Při vytváření nové funkce jazyka JavaScript můžeme vynechat kudrnaté závorky a klíčová slova function a return a zapsat tak kratší syntaxi funkce. Nejenže šetří čas, ale také vytvářejí čisté a čitelnější funkce.
V tomto článku se podíváme na několik reálných scénářů vytváření šipkových funkcí – pomocí zápisu ES6 versus staršího zápisu ECMAScript 5, abychom viděli, jak si obě syntaxe vzájemně odpovídají.
Nejjednodušší syntaxe šipkové funkce je, když funkce nemá žádné parametry. V následujícím příkladu syntaxe ECMAScript 5 deklaruje funkční výraz a přiřazuje jej proměnné birthday. Na konzolu vypíše jednoduchý textový řetězec s textem „Všechno nejlepší k narozeninám!“:
V syntaxi šipkové funkce zmizí kudrnaté závorky a klíčová slova function a return. Nyní celá funkce zabírá pouze jeden jediný řádek. Prázdné závorky naznačují, že funkce nemá žádné parametry, a tlustá šipka váže tělo funkce na (momentálně neexistující) parametry:
Jeden parametr
Rozšíříme předchozí příklad o jeden parametr, konkrétně jméno. Stará syntaxe ES5 přijímá jeden parametr a jeho hodnotu připojuje k řetězci, který má být vrácen:
Syntaxe funkce arrow dělá v podstatě totéž. Musíme uzavřít název parametru do závorek před tlustou šipkou a vynechat klíčové slovo return v bloku funkce:
Dva parametry
Můžeme použít šipkové funkce s libovolným počtem parametrů. Zde je například stejný příklad se dvěma parametry, věkem a jménem. Nyní funkce birthday() vyžaduje dva vstupy, aby vrátila řetězec. Nejprve použijme ECMAScript 5:
A zde je stejný kód s novým zápisem ES6:
Objektové literály
Syntaxi šipkové funkce můžeme použít také k deklaraci setterových funkcí, které umožňují uživatelům nastavit hodnotu objektových literálů. Níže uvedená funkce setBirthday() umožňuje uživatelům nastavit jméno a věk osoby, která má narozeniny:
Při použití notace funkce arrow stačí k definování stejné funkce setter pouze jeden řádek:
Manipulace s poli
Šipkové funkce můžeme použít také k manipulaci s poli jazyka JavaScript. Podívejme se například na pole persons, které obsahuje tři objektové literály, z nichž každý má vlastnost jméno a věk:
Vestavěná metoda map() jazyka JavaScript nám umožňuje volat stejnou funkci na každý prvek pole. Pomocí tradičního zápisu ES5 můžeme vrátit vlastnost jméno každé osoby následujícím způsobem:
Pomocí zápisu funkce arrow můžeme stejnou úlohu provést na jednom řádku:
Kdy nepoužívat šipkové funkce
Ačkoli mají šipkové funkce mnoho případů použití, přicházejí s nimi i některá omezení. Existují některé scénáře, kdy syntaxi šipkových funkcí nemůžeme nebo bychom neměli používat.
Nejdůležitější je, že pomocí šipkových funkcí nemůžeme vytvářet konstruktory. Pokud použijeme klíčové slovo new společně se syntaxí tlusté šipky, konzola vyhodí chybu. K tomu dochází proto, že JavaScript zachází se šipkovými funkcemi stejně jako s metodami objektů. V důsledku toho nemohou mít vlastní metody, což by byla základní vlastnost objektů JavaScriptu. Kromě toho nemůžeme použít syntaxi ES6 k deklaraci objektových literálů a zpětných funkcí obsahujících metody využívající klíčové slovo this, protože šipkové funkce s ním zacházejí jiným způsobem.
Závěr
Šipkové funkce poskytují vývojářům užitečnou zkratku pro zápis funkčních výrazů v jazyce JavaScript. Syntaxe tlustých šipek má mnoho případů použití, takže se rychle stala oblíbenou funkcí ES6 v komunitě uživatelů jazyka JavaScript. Při důsledném používání může nový kompaktní zápis ušetřit spoustu času a šířky pásma a zlepšit čitelnost kódu.
Děkujeme, že jste si přečetli článek.
Napsat komentář