03.18 Void funkce

Výuka

Proč Void funkce?

Void funkce je funkce, která nevrací hodnotu - její účel je vykonat akci (vedlejší efekt), ne vypočítat hodnotu.

Proč to potřebujeme?

• Akce bez výsledku - Vypsat text, uložit do databáze, odeslat email
• Vedlejší efekty - Funkce dělá něco, ale není důležité, co vrací
• Event handlery - Reakce na události (kliknutí, scroll) obvykle nic nevracejí
• Jasnost v TypeScriptu - Typ void jasně říká: "Tato funkce nic nevrací"

Představ si to jako: Pokyn "vypni světlo". Očekáváš, že se světlo vypne, ale nečekáš, že dostaneš nějakou zprávu zpět. Akce je důležitá, ne návratová hodnota.

Jak to funguje?

1. Funkce bez return - automaticky vrací undefined
2. Funkce s return; (bez hodnoty) - také vrací undefined
3. V JavaScriptu je undefined "prázdná" hodnota
4. V TypeScriptu používáš typ void pro funkce, které nic nevracejí
5. void !== undefined (v TS je void speciální typ)

Klíčové koncepty

• Void funkce - funkce bez návratové hodnoty (vrací undefined)
• Vedlejší efekt (side effect) - funkce mění stav (vypíše text, změní DOM, uloží data)
• undefined - hodnota, kterou funkce bez return automaticky vrací
• void (TypeScript) - typová anotace pro funkce bez návratové hodnoty
• void ≠ undefined - v TS je void typ pro funkce, undefined je hodnota

JavaScript

Příklad 1: Funkce bez return

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

const result = greet("Alice");
console.log(result);
// → Hello, Alice!
// → undefined

Co se stalo?

1. Funkce greet nemá return
2. Vypíše text do konzole (vedlejší efekt)
3. Automaticky vrací undefined
4. Když uložíme výsledek do result, dostaneme undefined

Příklad 2: Funkce s prázdným return

function logMessage(msg) {
  if (!msg) {
    return;  // Předčasné ukončení bez hodnoty
  }
  console.log("Zpráva: " + msg);
}

console.log(logMessage(""));       // → undefined
console.log(logMessage("Ahoj"));   // → Zpráva: Ahoj
                                    // → undefined

Co se stalo?

• return; (bez hodnoty) ukončí funkci a vrátí undefined
• Užitečné pro předčasné ukončení funkce
• Funkce stejně vrací undefined

Příklad 3: Praktický příklad - DOM manipulace

function showMessage(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

showMessage("Toto je upozornění");
// Nic se nevrací, ale div se přidá do stránky

Co se stalo?

• Funkce vykonává akci - přidá div do stránky
• Nevrací hodnotu (vrací undefined)
• Účel funkce je vedlejší efekt, ne výpočet hodnoty

Příklad 4: Event handler (void funkce)

function handleClick(event) {
  console.log("Tlačítko bylo kliknuto!");
  console.log("Souřadnice:", event.clientX, event.clientY);
}

button.addEventListener("click", handleClick);
// Event handler nic nevrací

Co se stalo?

• Event handlery obvykle nic nevracejí
• Jejich účel je reagovat na událost (vedlejší efekt)
• Návratová hodnota je ignorována

Příklad 5: Rozdíl mezi void funkcí a funkcí vracející hodnotu

// Void funkce - vykonává akci
function logSum(a, b) {
  console.log("Součet je: " + (a + b));
}

// Funkce vracející hodnotu - vypočítá hodnotu
function calculateSum(a, b) {
  return a + b;
}

logSum(3, 5);           // → Součet je: 8 (nic nevrací)
const result = calculateSum(3, 5);  // → vrací 8
console.log(result);    // → 8

Co se stalo?

• Void funkce (logSum) - vypíše výsledek, nic nevrací
• Funkce vracející hodnotu (calculateSum) - vypočítá a vrátí hodnotu
• Pravidlo: Pokud potřebuješ hodnotu později, použij return

Příklad 6: forEach - vestavěná void funkce

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

numbers.forEach(function(num) {
  console.log(num * 2);
});
// → 2
// → 4
// → 6
// → 8

const result = numbers.forEach(num => num * 2);
console.log(result);  // → undefined (forEach nic nevrací!)

Co se stalo?

• forEach prochází pole, ale nic nevrací (vrací undefined)
• Použij forEach pro vedlejší efekty (výpis, ukládání)
• Pokud chceš nové pole, použij map (vrací hodnotu)

TypeScript

TypeScript přidává typ void pro funkce, které nic nevracejí. To jasně dokumentuje záměr a TypeScript zkontroluje, že funkce opravdu nic nevrací.

Stejné příklady s typy

// Void funkce s typem void
function greet(name: string): void {
  console.log("Hello, " + name + "!");
}

// Void funkce s předčasným returnem
function logMessage(msg: string): void {
  if (!msg) {
    return;  // OK - return bez hodnoty je povolený ve void funkci
  }
  console.log("Zpráva: " + msg);
}

// Event handler s void
function handleClick(event: MouseEvent): void {
  console.log("Kliknuto na:", event.clientX, event.clientY);
}

// forEach callback má void return type
const numbers: number[] = [1, 2, 3];
numbers.forEach((num: number): void => {
  console.log(num * 2);
});

// ❌ Chyba - void funkce nemůže vracet hodnotu
function badVoidFunc(): void {
  return 42;  // Error: Type 'number' is not assignable to type 'void'
}

TypeScript přidává:

• ✅ Typ void - jasně říká "tato funkce nic nevrací"
• ✅ Kontrolu návratové hodnoty - TS zkontroluje, že void funkce nevrací hodnotu
• ✅ Lepší dokumentaci - hned vidíš, že funkce je pro vedlejší efekty
• ✅ Prevenci chyb - nemůžeš omylem vrátit hodnotu z void funkce

Rozdíl JS vs TS

JavaScript:

• Funkce bez return prostě vrací undefined
• Není jasné, zda funkce nic nevrací záměrně nebo jsi zapomněl return
• Můžeš omylem použít výsledek void funkce
• Méně explicitní

TypeScript:

• Typ void jasně říká: "Tato funkce nic nevrací"
• TypeScript zkontroluje, že void funkce nevrací hodnotu
• Nemůžeš omylem použít výsledek jako hodnotu
• Více explicitní a bezpečnější

// JavaScript - nejasné
function doSomething(x) {
  console.log(x);
  // Zapomněl jsem return? Nebo to je záměr?
}

// TypeScript - jasné
function doSomething(x: number): void {
  console.log(x);
  // Jasně vidím, že funkce nic nevrací (záměr)
}

// TypeScript zabrání chybám
function process(): void {
  console.log("Processing...");
}

const result: number = process();  // ❌ Error: Type 'void' is not assignable to type 'number'

Tip

💡 void vs undefined v TypeScriptu:

// ✅ Používej void pro návratový typ funkcí
function log(msg: string): void {
  console.log(msg);
}

// ❌ NE undefined pro návratový typ
function log(msg: string): undefined {
  console.log(msg);
  return undefined;  // Musíš explicitně vrátit undefined
}

// ⚠️ void říká "ignoruj návratovou hodnotu"
// undefined říká "funkce vrací undefined jako hodnotu"

💡 Kdy použít void funkce:

// ✅ Void - pro vedlejší efekty
function saveToDatabase(data) {
  database.save(data);
}

// ✅ Void - pro event handlery
function onClick() {
  alert("Kliknuto!");
}

// ❌ NE void - pokud potřebuješ výsledek
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

💡 forEach (void) vs map (vrací hodnotu):

const numbers = [1, 2, 3];

// ❌ Špatně - forEach nic nevrací
const doubled = numbers.forEach(n => n * 2);  // undefined!

// ✅ Dobře - map vrací nové pole
const doubled = numbers.map(n => n * 2);  // [2, 4, 6]

// ✅ forEach pro vedlejší efekty
numbers.forEach(n => console.log(n));  // Jen vypíše