Kapitel 3: Destructuring (Destrukturierung)

3.1 Array-Destructuring

📦 Was ist Array-Destructuring?

Array-Destructuring erlaubt es dir, Werte aus einem Array in einzelne Variablen zu extrahieren.

// ❌ Alte Methode (ES5)
var colors = ["rot", "grün", "blau"];
var first = colors[0];
var second = colors[1];
var third = colors[2];

// ✅ Neue Methode (ES6) - Array-Destructuring
const colors = ["rot", "grün", "blau"];
const [first, second, third] = colors;

console.log(first);  // "rot"
console.log(second); // "grün"
console.log(third);  // "blau"

---

🔄 Vertauschen von Variablen (Swapping)

// ❌ Alte Methode (ES5) - mit temporärer Variable
let a = 1;
let b = 2;
let temp = a;
a = b;
b = temp;
console.log(a, b); // 2, 1

// ✅ Neue Methode (ES6) - mit Destructuring
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

---

⏭️ Überspringen von Werten

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

// Nur das erste und vierte Element
const [first, , , fourth] = numbers;

console.log(first);  // 1
console.log(fourth); // 4

---

📋 Rest-Operator mit Arrays

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

// Erstes Element, Rest in einem Array
const [first, ...rest] = numbers;

console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

---

🎯 Standardwerte

const numbers = [1];

// Mit Standardwerten
const [a, b = 2, c = 3] = numbers;

console.log(a); // 1
console.log(b); // 2 (Standardwert verwendet)
console.log(c); // 3 (Standardwert verwendet)

---

3.2 Object-Destructuring (am häufigsten verwendet)

📦 Was ist Object-Destructuring?

Object-Destructuring erlaubt es dir, Eigenschaften eines Objekts in Variablen zu extrahieren.

// ❌ Alte Methode (ES5)
var person = { name: "Max", alter: 25, stadt: "Berlin" };
var name = person.name;
var alter = person.alter;
var stadt = person.stadt;

// ✅ Neue Methode (ES6) - Object-Destructuring
const person = { name: "Max", alter: 25, stadt: "Berlin" };
const { name, alter, stadt } = person;

console.log(name);  // "Max"
console.log(alter); // 25
console.log(stadt); // "Berlin"

---

🏷️ Umbenennen von Variablen

const person = { name: "Max", alter: 25 };

// Umbenennen mit Doppelpunkt
const { name: vorname, alter: age } = person;

console.log(vorname); // "Max"
console.log(age);     // 25
// console.log(name);  // ❌ ReferenceError

---

🎯 Standardwerte

const person = { name: "Max", alter: 25 };

// Mit Standardwerten
const { name, alter, stadt = "Unbekannt" } = person;

console.log(name);  // "Max"
console.log(stadt); // "Unbekannt" (Standardwert verwendet)

---

📋 Rest-Operator mit Objekten

const person = { name: "Max", alter: 25, stadt: "Berlin", land: "Deutschland" };

// name extrahieren, Rest in einem Objekt
const { name, ...rest } = person;

console.log(name); // "Max"
console.log(rest); // { alter: 25, stadt: "Berlin", land: "Deutschland" }

---

🎯 Verschachteltes Destructuring

const person = {
  name: "Max",
  alter: 25,
  adresse: {
    stadt: "Berlin",
    land: "Deutschland"
  }
};

// Verschachteltes Destructuring
const { name, adresse: { stadt, land } } = person;

console.log(name);  // "Max"
console.log(stadt); // "Berlin"
console.log(land);  // "Deutschland"

---

3.3 String-Destructuring

🔤 Einzelne Zeichen extrahieren

const str = "Hallo";

// String-Destructuring (wie Array)
const [a, b, c, d, e] = str;

console.log(a); // "H"
console.log(b); // "a"
console.log(c); // "l"
console.log(d); // "l"
console.log(e); // "o"

---

📏 Länge eines Strings

const { length } = "Hallo";
console.log(length); // 5

---

3.4 Funktionsparameter-Destructuring

📦 Parameter-Destructuring bei Objekten

// ❌ Alte Methode (ES5)
function createPerson(options) {
  var name = options.name;
  var alter = options.alter;
  var stadt = options.stadt;
  return `${name} (${alter}) aus ${stadt}`;
}

// ✅ Neue Methode (ES6) - Parameter-Destructuring
function createPerson({ name, alter, stadt }) {
  return `${name} (${alter}) aus ${stadt}`;
}

// Aufruf
const person = createPerson({ name: "Max", alter: 25, stadt: "Berlin" });
console.log(person); // "Max (25) aus Berlin"

---

🎯 Standardwerte in Funktionsparametern

function createPerson({ name, alter, stadt = "Unbekannt" } = {}) {
  return `${name} (${alter}) aus ${stadt}`;
}

// Aufruf mit fehlenden Parametern
console.log(createPerson({ name: "Max", alter: 25 })); 
// "Max (25) aus Unbekannt"

console.log(createPerson({})); 
// "undefined (undefined) aus Unbekannt"

console.log(createPerson()); 
// "undefined (undefined) aus Unbekannt"

---

📦 Parameter-Destructuring bei Arrays

function sum([a, b, c]) {
  return a + b + c;
}

console.log(sum([1, 2, 3])); // 6

---

3.5 Standardwerte setzen

🎯 Standardwerte bei Array-Destructuring

const numbers = [1];

// Mit Standardwerten
const [a = 10, b = 20, c = 30] = numbers;

console.log(a); // 1
console.log(b); // 20 (Standardwert)
console.log(c); // 30 (Standardwert)

---

🎯 Standardwerte bei Object-Destructuring

const person = { name: "Max" };

// Mit Standardwerten
const { name, alter = 25, stadt = "Berlin" } = person;

console.log(name);  // "Max"
console.log(alter); // 25 (Standardwert)
console.log(stadt); // "Berlin" (Standardwert)

---

🎯 Standardwerte in Funktionsparametern

function greet({ name = "Gast", alter = "?" } = {}) {
  return `Hallo ${name} (${alter})`;
}

console.log(greet({ name: "Max" })); // "Hallo Max (?)"
console.log(greet({}));              // "Hallo Gast (?)"
console.log(greet());                // "Hallo Gast (?)"

---

3.6 Praxisszenario: API-Daten schnell abrufen

🌐 API-Antwort verarbeiten

// Angenommen, eine API gibt folgendes zurück:
const apiResponse = {
  status: 200,
  data: {
    user: {
      id: 1,
      name: "Max Mustermann",
      email: "max@example.com",
      address: {
        city: "Berlin",
        country: "Deutschland"
      }
    }
  }
};

// ✅ Destructuring - Daten extrahieren
const { status, data: { user: { name, email, address: { city } } } } = apiResponse;

console.log(status); // 200
console.log(name);   // "Max Mustermann"
console.log(email);  // "max@example.com"
console.log(city);   // "Berlin"

---

📋 Array von Objekten verarbeiten

const users = [
  { id: 1, name: "Max", aktiv: true },
  { id: 2, name: "Erika", aktiv: false },
  { id: 3, name: "Julia", aktiv: true }
];

// ✅ Destructuring in Schleife
for (const { id, name, aktiv } of users) {
  console.log(`User ${id}: ${name} (Aktiv: ${aktiv})`);
}

// Ausgabe:
// User 1: Max (Aktiv: true)
// User 2: Erika (Aktiv: false)
// User 3: Julia (Aktiv: true)

---

🎯 Konfigurationsobjekte verarbeiten

function fetchData(url, options = {}) {
  // Standardwerte mit Destructuring
  const {
    method = "GET",
    headers = {},
    timeout = 5000,
    retries = 3
  } = options;

  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:

• ✅ Array-Destructuring (Werte extrahieren, vertauschen, Rest-Operator)
• ✅ Object-Destructuring (am häufigsten verwendet, Umbenennen, Standardwerte)
• ✅ String-Destructuring
• ✅ Funktionsparameter-Destructuring
• ✅ Standardwerte setzen
• ✅ Praxisanwendung (API-Daten verarbeiten)

📝 Übung

1. Array-Destructuring:

   const colors = ["rot", "grün", "blau", "gelb"];
   // Extrahiere das erste und letzte Element

2. Object-Destructuring:

   const person = { name: "Max", alter: 25, stadt: "Berlin" };
   // Extrahiere 'name' und 'stadt', benenne 'stadt' in 'city' um

3. Funktionsparameter-Destructuring:

   // Erstelle eine Funktion 'describeUser', die ein Objekt mit 'name' und 'alter' akzeptiert
   // Verwende Destructuring im Funktionsparameter

➡️ Nächstes Kapitel

In Kapitel 4 lernen wir Spread-Operator und Rest-Parameter (...) - mächtige Werkzeuge zum Zusammenführen und Trennen von Arrays/Objekten!