Drei eng verwandte, moderne Syntax-Werkzeuge, die JavaScript-Code deutlich kompakter machen – und die wir bereits in Kapitel 8 (Rest-Parameter) und Kapitel 11 (Spread beim Kopieren) kurz gestreift haben. Jetzt sehen wir uns alle drei im Detail an.

Array-Destructuring

const betraege = [2400, -850, -120];

const [erster, zweiter, dritter] = betraege;
console.log(erster, zweiter, dritter); // 2400 -850 -120

const [einnahme, ...restBetraege] = betraege; // Rest-Muster: sammelt den REST in ein neues Array
console.log(einnahme);     // 2400
console.log(restBetraege); // [-850, -120]

const [, zweiterUebersprungen] = betraege; // Elemente überspringen mit leerem Slot
console.log(zweiterUebersprungen); // -850

Objekt-Destructuring

const transaktion = { beschreibung: 'Miete Februar', betrag: -850, kategorie: 'Miete' };

const { beschreibung, betrag } = transaktion;
console.log(beschreibung, betrag); // 'Miete Februar' -850

Anders als bei Arrays spielt bei Objekten die REIHENFOLGE keine Rolle – es zählt der EIGENSCHAFTSNAME. Zwei nützliche Zusatz-Features:

const transaktion = { beschreibung: 'Miete Februar', betrag: -850 };

// Umbenennen beim Destructuring:
const { betrag: geldbetrag } = transaktion;
console.log(geldbetrag); // -850 (NICHT 'betrag' - dieser Name existiert hier nicht)

// Default-Wert, falls die Eigenschaft fehlt:
const { notiz = 'Keine Notiz' } = transaktion;
console.log(notiz); // 'Keine Notiz' - transaktion.notiz existiert nicht, Default greift

Destructuring direkt in Funktionsparametern

Ein extrem häufiges Praxis-Muster – besonders nützlich, wenn eine Funktion ein Objekt mit vielen Feldern erhält, aber nur wenige davon braucht:

function formatiereTransaktion({ beschreibung, betrag, kategorie = 'Sonstiges' }) {
  return `${beschreibung} (${kategorie}): ${betrag} EUR`;
}

console.log(formatiereTransaktion({ beschreibung: 'Kino', betrag: -18 }));
// 'Kino (Sonstiges): -18 EUR'

Spread-Operator bei Arrays: Kopieren und Zusammenführen

const januarBetraege = [2400, -850];
const februarBetraege = [-60, -18];

const kopie = [...januarBetraege]; // flache KOPIE, kein mutierendes Alias
const alleBetraege = [...januarBetraege, ...februarBetraege]; // zusammenführen

console.log(alleBetraege); // [2400, -850, -60, -18]

Spread-Operator bei Objekten: unveränderliche Updates

Da Objekte per Referenz vergleichen werden (Kapitel 12), ist der Spread-Operator der Standard-Weg, eine "aktualisierte Kopie" zu erzeugen, statt das Original zu mutieren:

const transaktion = { beschreibung: 'Miete Februar', betrag: -850, kategorie: 'Miete' };

// Neue Kopie mit geändertem Betrag, Rest bleibt gleich:
const korrigiert = { ...transaktion, betrag: -870 };

console.log(korrigiert);  // { beschreibung: 'Miete Februar', betrag: -870, kategorie: 'Miete' }
console.log(transaktion); // unverändert: { beschreibung: 'Miete Februar', betrag: -850, kategorie: 'Miete' }

Praxisbeispiel: eine Transaktion sicher aktualisieren

function aktualisiereTransaktion(transaktion, aenderungen) {
  return { ...transaktion, ...aenderungen };
}

const original = { beschreibung: 'Miete Februar', betrag: -850, kategorie: 'Miete' };
const aktualisiert = aktualisiereTransaktion(original, { betrag: -870 });

console.log(original);     // { beschreibung: 'Miete Februar', betrag: -850, kategorie: 'Miete' }
console.log(aktualisiert); // { beschreibung: 'Miete Februar', betrag: -870, kategorie: 'Miete' }