Destructuring und Spread in JavaScript – Objekte und Arrays elegant auspacken

Zwei ES6-Features nutze ich in fast jeder Datei: Destructuring (Werte auspacken) und der Spread-Operator ... (Werte kopieren/verteilen). Zusammen machen sie Code kürzer und vermeiden versehentliche Änderungen an geteilten Objekten.

Destructuring: gezielt auspacken

const user = { name: "Mia", role: "admin", stadt: "Köln" };

const { name, role } = user;           // name = "Mia", role = "admin"
const { stadt: ort = "unbekannt" } = user;  // umbenennen + Standardwert

// Auch bei Arrays und in Funktions-Parametern:
const [erster, zweiter] = ["a", "b", "c"];
function greet({ name, role }) {
  return `Hallo ${name} (${role})`;
}

Statt user.name fünf Mal zu schreiben, holst du dir die Felder einmal heraus. In Parametern ist es besonders schön: Der Funktionskopf zeigt sofort, was gebraucht wird.

Spread: kopieren statt mutieren

const basis = { theme: "dark", lang: "de" };

// neues Objekt mit Änderung – basis bleibt unangetastet:
const config = { ...basis, lang: "en" };   // { theme:"dark", lang:"en" }

// Arrays zusammenfügen:
const alle = [...ersteListe, ...zweiteListe];

Der Schlüssel: Du erzeugst eine flache Kopie und überschreibst nur, was du willst. Genau dieses Muster brauchst du in React/State-Management ständig, um Zustände nicht direkt zu verändern.

Eine Falle: es ist nur eine flache Kopie

const kopie = { ...original };
kopie.adresse.stadt = "Bonn";   // ändert auch original.adresse!

Verschachtelte Objekte teilen sich weiter dieselbe Referenz. Für tiefe Kopien nimmst du structuredClone(original).

Destructuring und Spread halten meinen Frontend-Code schlank und frei von Mutations-Bugs. Mehr Snippets auf code.bymw.de.

Quellen

• Destructuring — MDN
• Spread-Syntax — MDN