07 – Funktionen 📦

Wiederverwendbarer, strukturierter und wartbarer Code

🎯 1. Was ist eine Funktion?

Eine Funktion ist ein benannter Code-Block, der bei Aufruf ausgeführt wird. Sie ist das Herzstück jeder Software – ohne Funktionen wäre Code chaotisch und nicht wartbar.

💡 Merke: Eine Funktion sollte eine Aufgabe erfüllen – und das gut („Single Responsibility Principle“).

📊 2. Übersicht: Funktionen-Grundlagen

Konzept	Beispiel	Beschreibung
Deklaration	`function hallo() { ... }`	Definiert die Funktion („Rezept erstellen“)
Aufruf	`hallo();`	Führt die Funktion aus („Rezept backen“)
Parameter	`function gruessen(name) { ... }`	Eingabewerte – machen die Funktion flexibel
Rückgabewert	`return "Hallo";`	Ergebnis der Funktion – kann in Variablen gespeichert werden

🎯 3. Einleitung & W3Schools

Funktionen sind der Schlüssel zu sauberem, wartbarem Code. Sie verhindern Wiederholung, verbessern Lesbarkeit und isolieren Fehler.

🔗 W3Schools – JavaScript Functions

🧠 4. KI-Prompt-Training

Aufgabe: Formuliere einen Prompt, mit dem du KI um Hilfe bitten würdest, um zu erklären, warum Funktionen mit Rückgabewert besser sind als solche ohne – und wie der Gültigkeitsbereich (Scope) von Variablen in Funktionen funktioniert.

📦 5. Funktion ohne Parameter

Eine einfache Funktion, die immer das Gleiche tut – wie ein Schalter.

function sagHallo() {
  document.getElementById("ausgabe-hallo").innerHTML = 
    "<p>👋 Hallo! Diese Funktion macht immer dasselbe.</p>";
}

🔄 6. Funktion mit Parametern

Parameter machen Funktionen anpassungsfähig – wie ein Rezept mit variablen Zutaten.

function gruessen(name) {
  return `Hallo, ${name}! Schön, dich zu sehen. 🌟`;
}

function demoParameter() {
  const nachricht1 = gruessen("Anna");
  const nachricht2 = gruessen("Ben");
  document.getElementById("ausgabe-param").innerHTML = 
    `<p>${nachricht1}</p><p>${nachricht2}</p>`;
}

📤 7. Rückgabewerte

Mit return gibt eine Funktion ein Ergebnis zurück – wie ein Taschenrechner.

function quadrieren(zahl) {
  return zahl * zahl;
}

function demoReturn() {
  const a = quadrieren(4); // → 16
  const b = quadrieren(7); // → 49
  document.getElementById("ausgabe-return").innerHTML = 
    `<p>4² = <strong>${a}</strong></p>
     <p>7² = <strong>${b}</strong></p>`;
}

🔍 8. Gültigkeitsbereich – wo gilt eine Variable?

Variablen in einer Funktion sind lokal – außerhalb nicht sichtbar. Das verhindert unerwartete Nebeneffekte!

function demoScope() {
  const global = "Ich bin außen sichtbar";
  
  function innereFunktion() {
    const lokal = "Ich existiere nur hier!";
    return lokal;
  }
  
  document.getElementById("ausgabe-scope").innerHTML = 
    `<p>Außen: <code>global</code> = "${global}"</p>
     <p>Innen: <code>lokal</code> = "${innereFunktion()}"</p>
     <p class="warnung">⚠️ „lokal“ ist außerhalb der Funktion <em>nicht zugreifbar</em>.</p>`;
}

💼 9. Praxis: Eine Funktion – viele Anwendungen

Dieselbe Funktion kann in verschiedenen Kontexten genutzt werden – das ist der Schlüssel zur Effizienz.

function formatierePreis(betrag) {
  return `${betrag.toFixed(2)} €`;
}

function demoPraxisFunktion() {
  const preis1 = formatierePreis(12.9);
  const preis2 = formatierePreis(100);
  const preis3 = formatierePreis(0.5);
  
  document.getElementById("ausgabe-praxis").innerHTML = 
    `<ul>
      <li>Kaffee: <strong>${preis1}</strong></li>
      <li>Laptop: <strong>${preis2}</strong></li>
      <li>Brötchen: <strong>${preis3}</strong></li>
    </ul>`;
}