03.03 Arrow Functions

Výuka

Proč Arrow Functions?

Arrow functions (šipkové funkce) jsou třetí způsob, jak napsat funkci v JavaScriptu. Byly přidány v roce 2015 (ES6) hlavně pro stručnější zápis.

// Function expression - dlouhý zápis
const square = function(x) {
  return x * x;
};

// Arrow function - krátký zápis
const square = x => x * x;

Proč je to užitečné?

• Kratší kód - méně psaní, více čitelnosti
• Perfektní pro callbacks - array.map(x => x * 2) je jasnější než array.map(function(x) { return x * 2; })
• Čistý zápis - vyjadřuje "vstup → výstup"

Představ si to jako: Matematický zápis funkce f(x) = x² vs slovní popis "funkce, která vezme x a vrátí x krát x". Arrow funkce je jako matematický zápis - stručný a jasný.

Jak to funguje?

Arrow funkce má tři formy podle toho, kolik parametrů má a co dělá:

1. Žádné parametry:    () => výsledek
2. Jeden parametr:     x => výsledek
3. Více parametrů:     (x, y) => výsledek

Dva způsoby zápisu těla:

1. Jednoduchý výraz:   x => x * x           (implicitní return)
2. Složitější logika:  x => { return x * x; }  (explicitní return)

Klíčové koncepty

• Šipka => - vyjadřuje "tento vstup dává tento výstup"
• Implicitní return - pokud je tělo jediný výraz, return se doplní automaticky
• Vynechání závorek - u jednoho parametru nemusíš psát (x), stačí x
• Krátký zápis - x => x * x místo function(x) { return x * x; }

JavaScript

Příklad 1: Všechny formy arrow funkcí

// Více parametrů - musíš použít závorky
const roundTo = (n, step) => {
  let remainder = n % step;
  return n - remainder + (remainder < step / 2 ? 0 : step);
};

console.log(roundTo(23, 10));
// → 20

// Jeden parametr - dva způsoby zápisu (stejné)
const square1 = (x) => { return x * x; };  // Se závorkami a return
const square2 = x => x * x;                // Bez závorek, implicitní return

console.log(square1(5));  // → 25
console.log(square2(5));  // → 25

// Žádné parametry - prázdné závorky ()
const horn = () => {
  console.log("Toot");
};

horn();
// → Toot

Příklad 2: Implicitní vs explicitní return

Implicitní return - bez složených závorek:

// Jednoduchý výraz - return se doplní automaticky
const double = x => x * 2;

console.log(double(5));  // → 10
// Je to stejné jako: const double = x => { return x * 2; };

Explicitní return - se složenými závorkami:

// Složitější logika - musíš napsat return
const isEven = n => {
  const remainder = n % 2;
  return remainder === 0;
};

console.log(isEven(4));  // → true

Pozor na objekty:

// ❌ Tohle NEFUNGUJE - složené závorky vypadají jako tělo funkce
const makePerson = name => { name: name };

// ✅ Tohle FUNGUJE - obal objekt do kulatých závorek
const makePerson = name => ({ name: name });

console.log(makePerson("Alice"));
// → { name: "Alice" }

Příklad 3: Arrow funkce v praxi (arrays)

Arrow funkce jsou perfektní pro operace s poli:

const numbers = [1, 2, 3, 4, 5];

// Starý způsob - function expression
const doubled = numbers.map(function(x) {
  return x * 2;
});

// Nový způsob - arrow function
const doubled = numbers.map(x => x * 2);

console.log(doubled);
// → [2, 4, 6, 8, 10]

// Další příklady
const evens = numbers.filter(x => x % 2 === 0);     // [2, 4]
const sum = numbers.reduce((a, b) => a + b, 0);    // 15

TypeScript

Arrow funkce s TypeScript - přidáváš typy stejně jako u function expressions:

// Typy parametrů a návratové hodnoty
const square = (x: number): number => x * 2;

// Žádné parametry, nic nevrací
const horn = (): void => {
  console.log("Toot");
};

// Více parametrů s typy
const add = (a: number, b: number): number => a + b;

// Typ funkce můžeš zapsat explicitně
const multiply: (a: number, b: number) => number = (a, b) => a * b;

// Arrow funkce v arrays s typy
const numbers: number[] = [1, 2, 3, 4, 5];
const doubled: number[] = numbers.map((x: number): number => x * 2);

TypeScript přidává:

• ✅ Typovou kontrolu - square("ahoj") vyhodí chybu
• ✅ Lepší autocomplete - editor ti napovídá parametry
• ✅ Bezpečnost v arrays - numbers.map(x => x.toUpperCase()) vyhodí chybu (čísla nemají toUpperCase)

Rozdíl JS vs TS

JavaScript:

const divide = (a, b) => a / b;

divide(10, 2);    // 5 ✅
divide(10, "2");  // 5 ✅ (string se automaticky převede)
divide(10, 0);    // Infinity ✅ (žádné varování)

TypeScript:

const divide = (a: number, b: number): number => a / b;

divide(10, 2);    // 5 ✅
divide(10, "2");  // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'
divide(10, 0);    // Infinity (TS to nezachytí - je to validní JS)

Tip

💡 Kdy použít arrow funkce vs function expression?

// ✅ Arrow funkce - pro callbacks, krátké operace
const doubled = numbers.map(x => x * 2);
button.addEventListener('click', () => console.log('Clicked!'));

// ✅ Function expression - pro složitější logiku, metody objektů
const calculator = {
  value: 0,
  // Nepoužívej arrow funkci jako metodu objektu (problémy s 'this')
  add: function(n) {
    this.value += n;
  }
};

💡 Implicitní return je tvůj přítel:

// ❌ Zbytečně dlouhé
const double = x => {
  return x * 2;
};

// ✅ Krátké a jasné
const double = x => x * 2;

💡 Pozor na čitelnost:

// ❌ Příliš složité na jednom řádku
const process = data => data.filter(x => x.active).map(x => x.value).reduce((a, b) => a + b, 0);

// ✅ Rozdělené na více řádků
const process = data => data
  .filter(x => x.active)
  .map(x => x.value)
  .reduce((a, b) => a + b, 0);