Kapitel 7: Funktionserweiterungen

7.1 Standardparameter (Default Parameters)

📦 Was sind Standardparameter?

In ES6 können Funktionsparameter Standardwerte haben. Wenn beim Aufruf kein Argument übergeben wird (oder undefined), wird der Standardwert verwendet.

// ❌ Alte Methode (ES5) - Standardwerte simulieren
function greetOld(name) {
  name = name || "Gast";
  return "Hallo " + name;
}
console.log(greetOld());       // "Hallo Gast"
console.log(greetOld("Max")); // "Hallo Max"

// ✅ Neue Methode (ES6) - Standardparameter
function greet(name = "Gast") {
  return `Hallo ${name}`;
}
console.log(greet());          // "Hallo Gast"
console.log(greet("Max"));    // "Hallo Max"

---

🎯 Standardparameter - einfache Beispiele

// 1. Einfacher Standardparameter
function multiply(a = 1, b = 1) {
  return a * b;
}
console.log(multiply());       // 1 (1 * 1)
console.log(multiply(5));     // 5 (5 * 1)
console.log(multiply(5, 3)); // 15 (5 * 3)

// 2. Standardparameter mit `undefined`
function greet(name = "Gast") {
  return `Hallo ${name}`;
}
console.log(greet(undefined)); // "Hallo Gast" (Standardwert verwendet)
console.log(greet(null));     // "Hallo null" (null ist ein Wert!)

// 3. Standardparameter mit Funktionen
function getDefaultName() {
  return "Gast";
}
function greet(name = getDefaultName()) {
  return `Hallo ${name}`;
}
console.log(greet()); // "Hallo Gast"

---

⚠️ Achtung: null vs undefined

function test(value = "Standard") {
  console.log(value);
}

test(undefined); // "Standard" ✅ (Standardwert verwendet)
test(null);      // null ❌ (null ist ein "Wert"!)
test(0);         // 0 ❌ (0 ist ein "Wert"!)
test("");        // "" ❌ (Leerstring ist ein "Wert"!)

---

📋 Standardparameter in Arrow Functions

// Arrow Function mit Standardparametern
const greet = (name = "Gast") => `Hallo ${name}`;

console.log(greet());       // "Hallo Gast"
console.log(greet("Max")); // "Hallo Max"

---

7.2 Rest-Parameter in Funktionen

📦 Was ist der Rest-Parameter?

Siehe Kapitel 4 für Details. Hier kurz zusammengefasst:

// Rest-Parameter sammelt alle verbleibenden Argumente in einem Array
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

---

🎯 Rest-Parameter mit Standardparametern kombinieren

function createUser(name = "Gast", ...hobbys) {
  return {
    name,
    hobbys
  };
}

console.log(createUser("Max", "Sport", "Lesen"));
// { name: "Max", hobbys: ["Sport", "Lesen"] }

console.log(createUser());
// { name: "Gast", hobbys: [] }

---

7.3 Arrow Functions in Funktionen (Kurzschreibweise)

🔤 Arrow Functions als Funktionsrumpf

// ❌ Alte Methode (ES5) - Funktionsrumpf mit return
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(n) {
  return n * 2;
});

// ✅ Neue Methode (ES6) - Arrow Function
const doubledES6 = numbers.map(n => n * 2);

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

---

🎯 Arrow Functions in Callback-Funktionen

const users = [
  { name: "Max", alter: 25 },
  { name: "Erika", alter: 30 },
  { name: "Julia", alter: 28 }
];

// Sortieren nach Alter
const sorted = users.sort((a, b) => a.alter - b.alter);

console.log(sorted);
// [
//   { name: "Max", alter: 25 },
//   { name: "Julia", alter: 28 },
//   { name: "Erika", alter: 30 }
// ]

---

7.4 Funktionsparameter-Destructuring

📦 Was ist Parameter-Destructuring?

Du kannst Funktionsparameter direkt destrukturieren (siehe Kapitel 3).

// ❌ Alte Methode (ES5)
function printUser(user) {
  console.log(`Name: ${user.name}, Alter: ${user.alter}`);
}

// ✅ Neue Methode (ES6) - Parameter-Destructuring
function printUser({ name, alter }) {
  console.log(`Name: ${name}, Alter: ${alter}`);
}

printUser({ name: "Max", alter: 25 });
// "Name: Max, Alter: 25"

---

🎯 Standardwerte im Parameter-Destructuring

function printUser({ name = "Gast", alter = "?" } = {}) {
  console.log(`Name: ${name}, Alter: ${alter}`);
}

printUser({ name: "Max" }); // "Name: Max, Alter: ?"
printUser({});              // "Name: Gast, Alter: ?"
printUser();                // "Name: Gast, Alter: ?"

---

📋 Erweitertes Beispiel: API-Konfiguration

function fetchData(url, {
  method = "GET",
  headers = {},
  timeout = 5000,
  retries = 3
} = {}) {
  console.log(`Fetching ${url} with method ${method}`);
  console.log(`Timeout: ${timeout}ms, Retries: ${retries}`);
  // ... API-Aufruf
}

// Aufruf
fetchData("https://api.example.com/users", {
  method: "POST",
  timeout: 10000
});
// Fetching https://api.example.com/users with method POST
// Timeout: 10000ms, Retries: 3

---

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Standardparameter (name = "Gast")
• ✅ Rest-Parameter (...args) in Funktionen
• ✅ Arrow Functions als Funktionsrumpf (Kurzschreibweise)
• ✅ Funktionsparameter-Destructuring
• ✅ Standardwerte im Parameter-Destructuring

📝 Übung

1. Standardparameter:

   // Erstelle eine Funktion 'divide', die zwei Parameter hat (a, b = 1)
   // Bei Aufruf ohne zweiten Parameter soll 1 als Standard verwendet werden

2. Rest-Parameter:

   // Erstelle eine Funktion 'findMax', die beliebig viele Zahlen akzeptiert
   // und die größte Zahl zurückgibt

3. Parameter-Destructuring:

   // Erstelle eine Funktion 'introduce', die ein Objekt mit 'name' und 'alter'
   // akzeptiert (Destrukturierung im Parameter)

➡️ Nächstes Kapitel

In Kapitel 8 lernen wir Array-Methoden (häufig in der Praxis) - map(), filter(), forEach(), find(), some(), every(), reduce() und mehr!