Funkce šipek, základy

Existuje další velmi jednoduchá a stručná syntaxe pro vytváření funkcí, která je často lepší než Function Expressions.

Říká se tomu „funkce šipky“, protože vypadá takto:

let func = (arg1, arg2, ..., argN) => expression;

Tím se vytvoří funkce func který přijímá argumenty arg1..argN , pak vyhodnotí expression na pravé straně s jejich použitím a vrátí svůj výsledek.

Jinými slovy, je to kratší verze:

let func = function(arg1, arg2, ..., argN) {
 return expression;
};

Podívejme se na konkrétní příklad:

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

/* This arrow function is a shorter form of:

let sum = function(a, b) {
 return a + b;
};
*/

alert( sum(1, 2) ); // 3

Jak vidíte, (a, b) => a + b znamená funkci, která přijímá dva argumenty s názvem a a b . Po provedení vyhodnotí výraz a + b a vrátí výsledek.

• Pokud máme pouze jeden argument, pak lze závorky kolem parametrů vynechat, čímž se to ještě zkrátí.

  Například:

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

• Pokud nejsou žádné argumenty, jsou závorky prázdné, ale musí být přítomny:

  let sayHi = () => alert("Hello!");
  
  sayHi();

Funkce šipek lze použít stejným způsobem jako Function Expressions.

Chcete-li například dynamicky vytvořit funkci:

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
 () => alert('Hello!') :
 () => alert("Greetings!");

welcome();

Funkce šipek se mohou na první pohled zdát neznámé a nepříliš čitelné, ale to se rychle změní, jak si oči zvyknou na strukturu.

Jsou velmi vhodné pro jednoduché jednořádkové akce, kdy jsme prostě příliš líní napsat mnoho slov.

Funkce víceřádkové šipky

Funkce šipek, které jsme dosud viděli, byly velmi jednoduché. Vzali argumenty zleva od => , vyhodnotil a vrátil výraz na pravé straně s nimi.

Někdy potřebujeme složitější funkci s více výrazy a příkazy. V tom případě je můžeme uzavřít do složených závorek. Hlavní rozdíl je v tom, že složené závorky vyžadují return v nich vrátit hodnotu (stejně jako běžná funkce).

Takhle:

let sum = (a, b) => { // the curly brace opens a multiline function
 let result = a + b;
 return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

Zde jsme chválili funkce šipek pro stručnost. Ale to není vše!

Funkce šipek mají další zajímavé funkce.

Abychom je mohli prostudovat do hloubky, musíme se nejprve seznámit s některými dalšími aspekty JavaScriptu, takže se k funkcím šipek vrátíme později v kapitole Revidované funkce šipek.

Prozatím již můžeme používat funkce šipek pro jednořádkové akce a zpětná volání.

Shrnutí

Funkce šipek jsou užitečné pro jednoduché akce, zejména pro jednořádkové. Přicházejí ve dvou příchutích:

1. Bez složených závorek:(...args) => expression – pravá strana je výraz:funkce jej vyhodnotí a vrátí výsledek. Závorky lze vynechat, pokud existuje pouze jeden argument, např. n => n*2 .
2. Se složenými závorkami:(...args) => { body } – závorky nám umožňují zapsat do funkce více příkazů, ale potřebujeme explicitní return něco vrátit.