Destructuring und Spread/Rest

Extrahiere Daten sauber aus Objekten und Arrays und kopiere und kombiniere dann Strukturen mit dem Spread-Operator.

8 Min. · 3 Fragen

Wenn du Daten von einer API empfängst, brauchst du oft nur wenige Eigenschaften. Destructuring extrahiert sie in einer Zeile, mit der Möglichkeit, umzubenennen, in verschachtelte Objekte hineinzugreifen und einen Standardwert anzugeben, falls die Eigenschaft fehlt.

const user = {
  id: 42,
  name: "Lea",
  address: { city: "Lyon", zip: "69001" }
};

const { name, address: { city } } = user;
const { role = "guest" } = user;

console.log(name, city, role); // "Lea" "Lyon" "guest"

Destructuring funktioniert auch bei Arrays, diesmal nach Position. Sein professionellster Einsatz bleiben die Funktionsparameter: Statt ein undurchsichtiges Objekt zu empfangen, kündigt die Signatur genau an, welche Eigenschaften erwartet werden. Der Code wird selbstdokumentierend.

const podium = ["gold", "silver", "bronze"];
const [first, , third] = podium;
console.log(first, third); // "gold" "bronze"

function formatUser({ name, role = "guest" }) {
  return `${name} (${role})`;
}

console.log(formatUser({ name: "Sam" }));
// "Sam (guest)"

Ein und derselbe ...-Operator hat zwei Gesichter. Als Spread entfaltet er ein Array oder Objekt, um es zu kopieren oder zusammenzuführen: viel genutzt, um Standardeinstellungen anzuwenden und sie dann zu überschreiben. Als Rest sammelt er "alles, was übrig bleibt" in ein Array, zum Beispiel um eine variable Anzahl von Argumenten anzunehmen.

const baseConfig = { theme: "dark", lang: "fr" };
const overrides = { lang: "en" };
const config = { ...baseConfig, ...overrides };
// { theme: "dark", lang: "en" }

const scores = [12, 18, 9];
const allScores = [...scores, 20]; // [12, 18, 9, 20]

function sumAll(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}
console.log(sumAll(1, 2, 3)); // 6

Denkübung, bevor du zum Quiz übergehst: Was passiert bei { ...baseConfig, ...overrides }, wenn beide Objekte lang definieren? Das zuletzt geschriebene gewinnt. Genau dieses Reihenfolgedetail macht das Muster "erst Standardwerte, dann Überschreibungen" möglich.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Was macht die Zeile const { city } = user;?
   • Sie erstellt eine Variable city, die user.city enthält
   • Sie benennt das Objekt user in city um
   • Sie erstellt ein neues leeres Objekt namens city
2. Was ist args in function log(...args) innerhalb der Funktion?
   • Ein Schlüssel-Wert-Objekt
   • Ein echtes Array, das alle empfangenen Argumente enthält
   • Eine Zeichenkette
   • Nur das erste Argument
3. Werden nach const copy = { ...original }; verschachtelte Objekte dupliziert?
   • Ja, die Kopie ist vollständig unabhängig
   • Nein, sie bleiben geteilt: Die Kopie ist flach
   • Sie werden aus der Kopie entfernt