03.15 Callback funkce

Výuka

Proč Callback funkce?

Callback funkce jsou jedním z nejdůležitějších konceptů v JavaScriptu. Umožňují nám předat funkci jako argument jiné funkci a říct: "Udělej toto, a až budeš hotov, zavolej tuhle funkci."

Proč to potřebujeme?

• Asynchronní operace - Zpracovat odpověď z API, až přijde (ne hned)
• Event handling - Zareagovat na kliknutí, stisk klávesy
• Flexibilní kód - Nechat funkci dělat různé věci podle toho, jaký callback dostane
• Abstrakce opakování - Zopakovat akci N-krát, ale obsah akce nechat na callbacku

Představ si to jako: Pokyn obsluze v restauraci. Řekneš: "Přineste mi jídlo, a až to bude hotové, zavolejte mě na tohle číslo." Telefon je callback - obsluha ho zavolá, až bude jídlo připravené. Nemusíš čekat u pultru, můžeš dělat jiné věci.

Jak to funguje?

Callback je prostě funkce předaná jako argument.

1. Máš funkci A, která přijímá parametr
2. Jako parametr jí předáš funkci B (= callback)
3. Funkce A udělá svou práci
4. Funkce A zavolá funkci B v nějakém okamžiku (hned, nebo později)
5. Funkce B dostane data od funkce A

Klíčové koncepty

• Callback - funkce předaná jako argument jiné funkci
• Funkce jako hodnota - v JavaScriptu můžeš funkci předat jako argument (jako číslo nebo text)
• Synchronní callback - callback se zavolá ihned (např. forEach, map)
• Asynchronní callback - callback se zavolá později (např. setTimeout, API volání)
• Anonymní callback - callback definovaný přímo na místě bez pojmenování

JavaScript

Příklad 1: Nejjednodušší callback

function greet(name, callback) {
  console.log("Hello " + name);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("Alice", sayGoodbye);
// → Hello Alice
// → Goodbye!

Co se stalo?

1. Funkce greet přijímá dva parametry: name (text) a callback (funkce)
2. Nejdřív vypíše "Hello Alice"
3. Pak zavolá callback() - což je funkce sayGoodbye
4. sayGoodbye vypíše "Goodbye!"

Příklad 2: Callback s anonymní funkcí

function greet(name, callback) {
  console.log("Hello " + name);
  callback();
}

greet("Bob", function() {
  console.log("Nice to meet you!");
});
// → Hello Bob
// → Nice to meet you!

Co se stalo?

• Místo předání pojmenované funkce jsme vytvořili anonymní funkci přímo na místě
• Tento pattern je v JavaScriptu velmi častý - nemusíme pojmenovávat funkci, kterou použijeme jen jednou

Příklad 3: Callback s arrow funkcí

function greet(name, callback) {
  console.log("Hello " + name);
  callback();
}

greet("Charlie", () => {
  console.log("See you later!");
});
// → Hello Charlie
// → See you later!

Co se stalo?

• Použili jsme arrow funkci () => { ... } jako callback
• Je to ještě stručnější zápis než anonymní function
• Moderní způsob zápisu callbacků

Příklad 4: Callback s parametry

function processNumber(num, callback) {
  const result = num * 2;
  callback(result);
}

processNumber(5, function(doubled) {
  console.log("Číslo zdvojnásobeno: " + doubled);
});
// → Číslo zdvojnásobeno: 10

Co se stalo?

1. processNumber zdvojnásobí číslo 5 → dostane 10
2. Zavolá callback a předá mu výsledek (10)
3. Callback dostane 10 do parametru doubled a vypíše ho

Příklad 5: Praktický příklad - Opakování akce

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, function(index) {
  console.log("Krok " + index);
});
// → Krok 0
// → Krok 1
// → Krok 2

// Nebo s arrow funkcí:
let labels = [];
repeat(5, i => {
  labels.push(`Položka ${i + 1}`);
});
console.log(labels);
// → ["Položka 1", "Položka 2", "Položka 3", "Položka 4", "Položka 5"]

Co se stalo?

• repeat je abstrakce - zabalili jsme opakování do funkce
• Obsah akce necháváme na callbacku - flexibilní!
• První příklad: callback vypisuje text
• Druhý příklad: callback plní pole

Příklad 6: Asynchronní callback - setTimeout

console.log("Start");

setTimeout(function() {
  console.log("Toto se vypíše po 2 vteřinách");
}, 2000);

console.log("Konec");

// → Start
// → Konec
// → Toto se vypíše po 2 vteřinách (po 2s)

Co se stalo?

1. Vypíše "Start"
2. setTimeout naplánuje callback na za 2000ms (2 vteřiny)
3. Program pokračuje dál - hned vypíše "Konec"
4. Po 2 vteřinách se zavolá callback a vypíše zprávu

Důležité: Toto je asynchronní callback - nezastaví program!

TypeScript

TypeScript přidává typové anotace pro callback funkce - můžeš specifikovat, jaké parametry callback dostane a co vrátí.

Stejné příklady s typy

// Callback bez parametrů a bez návratové hodnoty
function greet(name: string, callback: () => void): void {
  console.log("Hello " + name);
  callback();
}

greet("Alice", () => {
  console.log("Nice to meet you!");
});

// Callback s parametrem
function processNumber(num: number, callback: (result: number) => void): void {
  const result = num * 2;
  callback(result);
}

processNumber(5, (doubled) => {
  console.log("Číslo zdvojnásobeno: " + doubled);
});

// Callback s návratovou hodnotou
function calculate(a: number, b: number, operation: (x: number, y: number) => number): number {
  return operation(a, b);
}

const sum = calculate(5, 3, (x, y) => x + y);
console.log(sum);
// → 8

TypeScript přidává:

• ✅ Kontrolu typů callbacku - TS zkontroluje, že callback má správné parametry
• ✅ Lepší nápovědu - editor ti ukáže, jaké parametry callback dostane
• ✅ Prevenci chyb - nemůžeš předat callback s nesprávným podpisem
• ✅ Dokumentaci - hned vidíš, co callback očekává

Rozdíl JS vs TS

JavaScript:

• Callback může mít jakékoliv parametry
• Nemáš jistotu, co callback dostane
• Chyby odhalíš až při spuštění
• Flexibilnější, ale nebezpečnější

TypeScript:

• Callback má jasně definované parametry a návratový typ
• TypeScript zkontroluje, že callback sedí
• Chyby odhalíš už při psaní kódu
• Bezpečnější, lépe čitelné

// JavaScript - projde, ale způsobí problém
function process(callback) {
  callback(42, "hello");
}
process((x) => x * 2);  // Dostaneš číslo i text, ale očekáváš jen číslo

// TypeScript - editor tě upozorní
function process(callback: (num: number) => number): number {
  return callback(42);
}
process((x: number) => x * 2);  // ✅ OK
process((x: number, y: string) => x * 2);  // ❌ Error: Wrong callback signature

Tip

💡 Anonymní vs pojmenované callbacky:

// ✅ Anonymní callback - pro jednoduché, jednorázové akce
setTimeout(() => console.log("Hotovo"), 1000);

// ✅ Pojmenovaný callback - pro složitější nebo opakovaně použitou logiku
function handleClick() {
  console.log("Tlačítko kliknuto");
  // ... další logika
}
button.addEventListener("click", handleClick);

💡 Callback hell (peklo callbacků) - vyvaruj se:

// ❌ Špatně - vnořené callbacky jsou těžko čitelné
getData(function(a) {
  getMoreData(a, function(b) {
    getMoreData(b, function(c) {
      getMoreData(c, function(d) {
        // ... horror!
      });
    });
  });
});

// ✅ Dobře - použij Promises nebo async/await (pokročilé téma)
getData()
  .then(a => getMoreData(a))
  .then(b => getMoreData(b))
  .then(c => getMoreData(c));

💡 Předávej funkci, ne její volání:

// ❌ Špatně - volání funkce hned
setTimeout(console.log("Ahoj"), 1000);  // Vypíše "Ahoj" IHNED!

// ✅ Dobře - předání funkce (arrow funkce)
setTimeout(() => console.log("Ahoj"), 1000);  // Vypíše "Ahoj" po 1s

// ✅ Dobře - předání reference na funkci
function sayHello() { console.log("Ahoj"); }
setTimeout(sayHello, 1000);  // Pozor: bez závorek!