💡 1. Object Literals & Property Shorthand
Objekte speichern zusammengehörige Informationen als Schlüssel-Wert-Paare. Modernes JavaScript (ES6) bietet mit dem Property Shorthand eine extrem prägnante Syntax, wenn Variablen- und Eigenschaftsname übereinstimmen:
const name = "Max Mustermann";
const email = "max@beispiel.de";
// Vor ES6 (umständlich):
const alterUser = { name: name, email: email };
// Mit modernem ES6 Property Shorthand (sauber & prägnant):
const benutzer = { name, email, rolle: "user" };
console.log(benutzer); // { name: "Max Mustermann", email: "max@beispiel.de", rolle: "user" }📦 2. Destructuring Assignment (Auspacken von Daten)
Mit Destructuring entpackst du Werte direkt in separate Variablen. Das spart Code und erhöht die Lesbarkeit spürbar:
const person = { vorname: "Anna", stadt: "Berlin", punkte: 95 };
// 🎯 Object Destructuring:
const { vorname, stadt } = person;
console.log(vorname); // "Anna"
// 🎯 Destructuring mit Standardwerten und Aliases (Umbenennung):
const { land = "Deutschland", punkte: score } = person;
console.log(land); // "Deutschland" (Default, da 'land' in person nicht existiert)
console.log(score); // 95 (Alias für person.punkte)
// 🎯 Array Destructuring:
const koordinaten = [52.52, 13.405];
const [breite, laenge] = koordinaten;
console.log(breite, laenge); // 52.52, 13.405✨ 3. Spread- & Rest-Operator (...)
Die drei Punkte (...) ermöglichen das Ausbreiten (Spread) und Einsammeln (Rest) von Datenstrukturen:
const basisProfil = { name: "Lisa", alter: 28 };
const kontaktInfo = { email: "lisa@dev.io", stadt: "Hamburg" };
// 🌟 Spread: Objekte verschmelzen ohne Mutation (Immutability):
const vollstaendigesProfil = { ...basisProfil, ...kontaktInfo, status: "aktiv" };
console.log(vollstaendigesProfil);
// { name: "Lisa", alter: 28, email: "lisa@dev.io", stadt: "Hamburg", status: "aktiv" }
// 🌟 Rest: Eigenschaften separieren:
const { email, ...restlicheDaten } = vollstaendigesProfil;
console.log(email); // "lisa@dev.io"
console.log(restlicheDaten); // { name: "Lisa", alter: 28, stadt: "Hamburg", status: "aktiv" }Ein Objekt ist wie eine beschriftete Werkzeugkiste. Destructuring ist das gezielte Herausgreifen von genau dem Werkzeug (z. B. Hammer und Zange), das du jetzt benötigst, ohne die ganze Kiste herumtragen zu müssen. Der Spread-Operator (...) ist wie das Umschütten zweier Kisten in einen neuen Koffer, ohne den Originalinhalt zu beschädigen.
📑 4. Cheat-Sheet: Object & Destructuring Methoden
| Syntax / Methode | Beispiel | Beschreibung |
|---|---|---|
{ a, b } |
const obj = { name, email }; |
Property Shorthand |
const { k } = obj |
const { name, rolle = "user" } = u; |
Object Destructuring mit Default-Wert |
{ ...obj, neu } |
const klon = { ...original, id: 42 }; |
Spread-Operator zum Klonen & Erweitern |
Object.keys(obj) |
Object.keys({ a: 1, b: 2 }) // ["a", "b"] |
Array aller Eigenschaftsnamen (Keys) |
Object.values(obj) |
Object.values({ a: 1, b: 2 }) // [1, 2] |
Array aller Werte (Values) |
Object.entries(obj) |
Object.entries({ a: 1 }) // [["a", 1]] |
Array aus [key, value]-Paaren |
🎯 Aufgaben & Checkliste in aufgabe.js
Du kannst Destructuring direkt in der Funktionssignatur von reduce oder im Schleifenkopf nutzen:
items.reduce((sum, { preis = 0, anzahl = 1 }) => sum + (preis * anzahl), 0)