Aufgaben-Python/courses/javascript/05_objekte_und_destructuring

JS 03: Objekte, Destructuring & Rest/Spread 📦

Willkommen zu Modul 03 des JavaScript-Kurses!

Objekte sind der Herzschlag von JavaScript: Fast alles in JavaScript ist ein Objekt oder verhält sich wie eines. In diesem Modul lernst du, wie du strukturierte Daten erstellst, mit modernem ES6-Destructuring blitzschnell entpackst und Daten mit dem Spread- & Rest-Operator (...) elegant transformierst.

---

💡 1. Das Wichtigste in Kürze

A. Object Literals & Property Shorthand

Ein Objekt speichert Daten als Schlüssel-Wert-Paare (Key-Value Pairs):

// Klassische Deklaration
const person = {
  name: "Max",
  alter: 25,
  istEntwickler: true
};

// ES6 Property Shorthand (Wenn Variablenname und Key identisch sind)
const name = "Anna";
const email = "anna@example.com";
const user = { name, email }; 
// Entspricht: { name: name, email: email }

B. Destructuring Assignment (Objekte & Arrays entpacken)

Mit Destructuring kannst du Werte direkt aus Objekten oder Arrays extrahieren, ohne wiederholt objekt.eigenschaft schreiben zu müssen:

const dev = { name: "Sarah", sprache: "JavaScript", erfahrung: 5 };

// 🎯 Object Destructuring:
const { name, sprache } = dev;
console.log(name);    // "Sarah"
console.log(sprache); // "JavaScript"

// 🎯 Alias (Umbennen) & Standardwerte (Default Values):
const { alter = 18, name: vorname } = dev;
console.log(alter);   // 18 (Default-Wert, da 'alter' im Objekt fehlt)
console.log(vorname); // "Sarah" (unter neuem Namen verfügbar)

// 🎯 Array Destructuring:
const farben = ["#ff0000", "#00ff00", "#0000ff"];
const [rot, gruen] = farben;
console.log(rot); // "#ff0000"

C. Spread- & Rest-Operator (...)

Die drei Punkte ... haben je nach Kontext zwei mächtige Funktionen:

1. Spread-Operator (Ausbreiten / Zusammenfügen): Erzeugt eine flache Kopie (Shallow Copy) oder kombiniert mehrere Objekte/Arrays ohne Mutation:

   const basisInfo = { name: "Tom", alter: 30 };
   const kontakt = { email: "tom@web.de", stadt: "Berlin" };
   
   // Neues Objekt mit allen Eigenschaften beider Objekte:
   const vollstaendig = { ...basisInfo, ...kontakt, premium: true };
   

2. Rest-Operator (Einsammeln des Rests): Sammelt verbleibende Eigenschaften in einem neuen Objekt/Array:

   const { email, ...andereDaten } = vollstaendig;
   console.log(email);       // "tom@web.de"
   console.log(andereDaten); // { name: "Tom", alter: 30, stadt: "Berlin", premium: true }
   

D. Hilfsmethoden: Object.keys(), Object.values(), Object.entries()

const auto = { marke: "Tesla", modell: "Model 3", baujahr: 2024 };

console.log(Object.keys(auto));    // ["marke", "modell", "baujahr"]
console.log(Object.values(auto));  // ["Tesla", "Model 3", 2024]
console.log(Object.entries(auto)); // [["marke", "Tesla"], ["modell", "Model 3"], ["baujahr", 2024]]
console.log(Object.keys(auto).length); // 3 (Anzahl der Eigenschaften)

---

🧰 Die didaktische Analogie: "Die Werkzeugkiste & Auspack-Station"

• Das Objekt als Werkzeugkiste:
  Ein Objekt { hammer: "500g", saege: "Holz", bohrer: "Akku" } ist wie eine strukturierte Werkzeugkiste mit beschrifteten Fächern.
• Destructuring als gezieltes Herausgreifen:
  Statt die ganze schwere Kiste an die Baustelle zu tragen (werkzeugkiste.hammer), greifst du mit const { hammer, saege } = werkzeugkiste; genau die Werkzeuge heraus, die du für die aktuelle Arbeit brauchst.
• Spread (...) als Zusammenlegen in eine neue Kiste:
  Mit { ...kiste1, ...kiste2, multimeter: "digital" } schüttest du zwei Werkzeugkisten in eine neue, größere Kiste um und packst noch ein neues Werkzeug dazu – die ursprünglichen Kisten bleiben unberührt (Immutability)!

---

🎯 Aufgaben & Teilziele in aufgabe.js

Öffne die Datei aufgabe.js und löse die 5 Teilziele:

1. TODO 1: erstelleBenutzer(name, email, rolle = "user")
   Erstelle und gib ein Objekt mit { name, email, rolle } unter Verwendung des Property Shorthands zurück.

2. TODO 2: extrahiereDetails(benutzerObjekt)
   Extrahiere name und email mit Destructuring und gib den String "${name} (${email})" zurück.

3. TODO 3: fuegeAdresseHinzu(benutzerObjekt, adresseObjekt)
   Erzeuge mit Spread (...) ein neues, zusammengeführtes Objekt { ...benutzerObjekt, ...adresseObjekt }, ohne benutzerObjekt zu verändern.

4. TODO 4: zaehleEigenschaften(objekt)
   Ermittle die Anzahl der Eigenschaften eines Objekts mit Object.keys(objekt).length.

5. TODO 5: berechneWarenkorbGesamtwert(warenkorbItems)
   Berechne die Summe aus preis * anzahl für alle Items im Array. Nutze Destructuring (const { preis, anzahl = 1 }) im Schleifendurchlauf oder in .reduce().

---

🧪 Tests ausführen

Führe den Test in der interaktiven Web-IDE oder im Runner aus. Deine Lösung ist perfekt, wenn alle Tests erfolgreich durchlaufen!