Destructuring in JavaScript: Pattern Matching auf Datenstrukturen
Mit Destructuring schreibst du ein Muster, das die Form eines Objekts oder Arrays nachbildet, und ziehst damit in einer einzigen Zeile Werte per Name oder Position heraus. Statt dich Eigenschaft für Eigenschaft durch einen Wert zu hangeln, beschreibst du einfach, was du brauchst – und JavaScript reicht es dir rüber.
Es gibt zwei Varianten:
Die geschweiften Klammern greifen Objekte per Eigenschaftsnamen ab, die eckigen Klammern hingegen Arrays per Position. In beiden Fällen sind die Variablen vor dem = neue Deklarationen — du greifst also nicht per Index auf den Wert zu, sondern beschreibst ein Muster, mit dem die einzelnen Teile herausgezogen werden.
Bevor es Destructuring gab, sah derselbe Code so aus:
const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];
Schlimm ist das nicht, aber sobald du das in jeder Funktion machst, wird's schnell nervig.
Object Destructuring greift auf Property-Namen zurück
Bei Objekten müssen die Namen in den geschweiften Klammern mit den Property-Namen der Quelle übereinstimmen. Die Reihenfolge spielt keine Rolle — JavaScript sucht die Werte anhand des Schlüssels heraus.
Existiert eine Property nicht im Objekt, ist die entsprechende Variable schlicht undefined – einen Fehler gibt es dabei nicht:
Dieses stille undefined solltest du dir gut merken – ein Tippfehler im Property-Namen ist der Grund, warum man um 2 Uhr nachts verzweifelt vor dem Code sitzt.
Variablen beim Destructuring umbenennen
Manchmal passt der Property-Name am Objekt einfach nicht als Variablenname – vielleicht kollidiert er mit etwas anderem im Scope, oder die API verwendet eine Namenskonvention, die dir nicht gefällt. Mit der Syntax original: neuerName kannst du beim Destructuring direkt umbenennen:
Lies das als „nimm die Property id und nenne sie userId." Zuerst kommt der Property-Name, nach dem Doppelpunkt dann der neue Variablenname. Sieht aus wie eine Typ-Annotation aus anderen Sprachen – ist aber keine.
Defaultwerte beim Destructuring
Falls eine Property möglicherweise fehlt, kannst du direkt im Muster einen Defaultwert festlegen:
Defaultwerte greifen nur, wenn der Wert undefined ist. null, 0 und "" werden dagegen unverändert durchgereicht:
Genau diese Stelle bringt viele ins Straucheln. Wenn du willst, dass auch null den Defaultwert auslöst, brauchst du eine explizite Prüfung – oder du verwendest nach dem Destructuring den Nullish-Coalescing-Operator ??.
Defaultwerte und Umbenennen lassen sich übrigens auch kombinieren:
Array Destructuring funktioniert über die Position
Arrays haben keine Property-Namen, sondern nur Indizes – das Pattern matcht hier also nach der Position. Mit Kommas kannst du gezielt Einträge überspringen, die dich gerade nicht interessieren:
Die zwei führenden Kommas bedeuten: "Index 0 und 1 überspringen." Visuell etwas kryptisch, aber praktisch, wenn du nur einen Wert aus der Mitte brauchst.
Array Destructuring spielt seine Stärken besonders dann aus, wenn Funktionen Tupel zurückgeben:
Dasselbe Muster sieht man überall in React-Hooks: const [count, setCount] = useState(0).
Rest-Pattern: Den Rest einsammeln
Innerhalb eines Destructuring-Patterns sammelt ...name alles, was nicht namentlich oder über die Position zugeordnet wurde, in einer neuen Variablen.
Beim Array-Destructuring schnappt sich der Rest-Operator das Ende:
Bei Objekten schnappt sich der Rest-Operator alle Eigenschaften, die nicht explizit benannt wurden:
Das ist der idiomatische Weg, ein Feld aus einem Objekt zu entfernen, ohne es zu mutieren – rest ist ein neues Objekt, das alles außer id enthält.
Der Rest-Operator muss immer am Ende des Patterns stehen. const [...init, last] ist ein Syntaxfehler.
Verschachteltes Destructuring
Patterns lassen sich verschachteln. Ist eine Eigenschaft selbst ein Objekt oder Array, kannst du sie im selben Ausdruck direkt weiter zerlegen:
Mächtig, aber mit Bedacht einsetzen. Sobald drei Ebenen verschachtelter Klammern im Spiel sind, fühlt sich der Code an wie ein Rätsel. Dann lieber Zwischenwerte in eigene Variablen auslagern — Lesbarkeit schlägt Eleganz.
Ein Stolperstein: data: { user } im Muster erzeugt keine Variable namens data. Es ist eine Anweisung im Sinne von „steig in data hinein und mach mit dem Destructuring weiter". Wenn du data selbst brauchst, musst du es zusätzlich aufnehmen:
Destructuring von Funktionsparametern
Am häufigsten wirst du Destructuring direkt in der Parameterliste einer Funktion einsetzen. Aus einem schlichten "Options-Objekt übergeben" wird so eine Signatur, die sich selbst dokumentiert:
Am Aufrufpunkt sieht das aus wie jeder andere Aufruf mit Options-Objekt. In der Funktion selbst bekommst du benannte Variablen samt Defaultwerten – Schluss mit dem ewigen options.name || "default"-Boilerplate.
Eine Stolperfalle gibt's aber: Rufst du die Funktion ganz ohne Argument auf, knallt's, weil sich undefined nicht destrukturieren lässt. Gib dem kompletten Parameter deshalb einen Defaultwert:
Das = {} hinter dem Pattern heißt so viel wie: „Falls gar kein Argument reinkommt, tu so, als wäre es ein leeres Objekt." Danach greifen die inneren Defaultwerte.
Variablen tauschen und neu zuweisen
Destructuring funktioniert auch mit bereits deklarierten Variablen – allerdings brauchst du dann Klammern um das Object-Pattern, sonst interpretiert JavaScript das { als Beginn eines Blocks:
Der Array-Swap ist schön sauber. Das Neuzuweisen von Objekteigenschaften braucht man seltener, aber den Trick mit den Klammern sollte man im Hinterkopf behalten — irgendwann kommt der Moment, wo man ihn gebrauchen kann.
Ein Beispiel aus der Praxis
Packen wir das meiste vom Gelernten zusammen — eine Funktion, die eine API-Antwort verarbeitet:
Jede destrukturierte Ebene hat einen Defaultwert. Dadurch übersteht die Funktion auch unvollständige Daten, ohne dass du dich durch einen Wust an if-Abfragen kämpfen musst. Und genau darin liegt der eigentliche Gewinn: Signaturen, die gleichzeitig präzise und nachsichtig sind.
Als Nächstes: der Spread-Operator für Objekte
Mit Destructuring holst du Werte aus Objekten heraus. Mit Spread setzt du sie wieder hinein – zum Kopieren, Zusammenführen und Überschreiben. Im modernen JavaScript sind die beiden ein unzertrennliches Duo, und Spread ist der nächste Halt.
Häufig gestellte Fragen
Was ist Destructuring in JavaScript?
Destructuring ist eine Syntax, mit der du Werte aus Objekten oder Arrays in einem Schritt entpackst und an Variablen bindest. const { name } = user; holt die Eigenschaft name aus user. const [first, second] = list; greift die ersten beiden Elemente aus list. Auf der linken Seite des = steht dabei ein Muster, das die Struktur des Werts auf der rechten Seite widerspiegelt.
Wie benennt man eine Variable beim Destructuring um?
Dafür gibt es die Syntax { original: neuerName }. const { name: username } = user; holt die Eigenschaft name aus user und bindet sie an eine lokale Variable namens username. Das sieht auf den ersten Blick wie eine Typannotation aus – merk dir einfach: erst der Property-Name, dann nach dem Doppelpunkt der neue Variablenname.
Kann man beim Destructuring Default-Werte vergeben?
Ja. const { timeout = 5000 } = options; setzt 5000 ein, wenn options.timeout den Wert undefined hat. Defaults greifen ausschließlich bei undefined – null, 0 und '' werden unverändert durchgereicht. Defaults und Umbenennen lassen sich auch kombinieren: const { t: timeout = 5000 } = options;.
Was ist der Unterschied zwischen Destructuring und Spread?
Sieht ähnlich aus, macht aber genau das Gegenteil. Destructuring (const { a, b } = obj) zieht Werte aus einer Struktur heraus. Spread (const copy = { ...obj }) packt Werte in eine neue Struktur hinein. Taucht ... innerhalb eines Destructuring-Musters auf, ist das ein Rest-Pattern – es sammelt alles Übriggebliebene in eine neue Variable.
