Destructuring — Keyword · JavaScript-Referenz

Signatur

const [a, b, ...rest] = array; const { key, key: alias = standard, ...rest } = object;

Beschreibung

Die destrukturierende Zuweisung ist eine Kurzschreibweise, mit der sich Werte aus Arrays bzw. beliebigen Iterables (über ihre Position) oder aus Objekten (über den Eigenschaftsnamen) in einem einzigen Ausdruck auf mehrere Variablen verteilen lassen. Statt const x = punkt.x; const y = punkt.y; schreibt man einfach const { x, y } = punkt;.

Die Syntax funktioniert überall, wo Bindungen entstehen: in Deklarationen mit const, let und var, in Funktionsparametern, in for...of-Schleifen, in catch-Klauseln und bei reinen Zuweisungen an bereits vorhandene Variablen. Muster lassen sich beliebig verschachteln und mit Standardwerten (= wert), Umbenennung (key: neuerName), berechneten Schlüsseln ([ausdruck]: name) und Rest-Elementen (...rest) kombinieren.

Typische Einsatzfälle sind: benannte Optionen-Objekte als Funktionsparameter, das Auslesen von API-Antworten, das Tauschen zweier Variablen ohne Hilfsvariable, die Arbeit mit Object.entries() und mit Mehrfach-Rückgabewerten wie bei React-Hooks (const [state, setState] = useState()).

Wichtig: Standardwerte greifen nur bei undefined, nicht bei null. Das Destrukturieren von null oder undefined selbst wirft einen TypeError.

Parameter

Name	Typ	Default	Beschreibung
$muster Pflicht	ArrayPattern \| ObjectPattern		Das Zielmuster links vom `=`: `[a, b]` für positionsbasierte Zuordnung aus Iterables oder `{ a, b }` für namensbasierte Zuordnung aus Objekten. Verschachtelung ist erlaubt.
$quelle Pflicht	Iterable \| Object		Der Ausdruck rechts vom `=`. Bei Array-Mustern muss er iterierbar sein, bei Objekt-Mustern darf er nicht `null`/`undefined` sein (Primitive werden in Wrapper-Objekte umgewandelt).
$= standardwert	any	undefined	Optionaler Standardwert, der verwendet wird, wenn der entpackte Wert `undefined` ist. Wird nur bei Bedarf (lazy) ausgewertet.
$key: alias	Bezeichner		Nur bei Objekt-Mustern: liest die Eigenschaft `key` und bindet sie an die Variable `alias`.
$...rest	Array \| Object		Sammelt alle übrigen Elemente (als Array) bzw. übrigen eigenen, aufzählbaren Eigenschaften (als neues Objekt). Muss das letzte Element des Musters sein, ohne abschließendes Komma.

Beispiele

Array-Destrukturierung: Grundlagen, Auslassen, Rest und Tauschen

const farben = ['rot', 'grün', 'blau', 'gelb'];

const [erste, , dritte, ...uebrige] = farben;
console.log(erste, dritte, uebrige);

// Variablen tauschen ohne Hilfsvariable
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

rot blau [ 'gelb' ] 2 1

Objekt-Destrukturierung mit Umbenennung, Standardwerten und Verschachtelung

const antwort = {
  id: 42,
  name: 'Ada',
  adresse: { stadt: 'Berlin' },
  rolle: null
};

const {
  id: benutzerId,
  name,
  adresse: { stadt },
  sprache = 'de',
  rolle = 'gast', // null ist NICHT undefined -> kein Standardwert
  ...rest
} = antwort;

console.log(benutzerId, name, stadt, sprache, rolle);
console.log(rest);

42 Ada Berlin de null {}

Optionen-Objekt als Funktionsparameter

const erstelleRequest = (url, { methode = 'GET', timeout = 5000, header = {} } = {}) => {
  return `${methode} ${url} (Timeout: ${timeout} ms, Header: ${Object.keys(header).length})`;
};

console.log(erstelleRequest('/api/users'));
console.log(erstelleRequest('/api/users', { methode: 'POST', header: { 'Content-Type': 'application/json' } }));

GET /api/users (Timeout: 5000 ms, Header: 0) POST /api/users (Timeout: 5000 ms, Header: 1)

Destrukturierung in for...of mit Object.entries und Map

const preise = { apfel: 0.5, birne: 0.8 };

for (const [frucht, preis] of Object.entries(preise)) {
  console.log(`${frucht}: ${preis.toFixed(2)} €`);
}

const nutzer = new Map([[1, { name: 'Ada' }], [2, { name: 'Linus' }]]);
for (const [id, { name }] of nutzer) {
  console.log(id, name);
}

apfel: 0.50 € birne: 0.80 € 1 Ada 2 Linus

// Wichtig · Fallstricke

Standardwerte nur bei undefined: const { a = 1 } = { a: null } ergibt a === null. Für null-Fälle ggf. ?? nutzen.
TypeError bei null/undefined: const { x } = undefined wirft. Bei Funktionsparametern daher einen Standardwert für das ganze Objekt angeben: function f({ a } = {}). Verschachtelte Muster wie { adresse: { stadt } } werfen, wenn adresse fehlt.
Objekt-Zuweisung ohne Deklaration braucht Klammern: ({ a, b } = obj); – ohne Klammern wird { als Block interpretiert (SyntaxError). Achtung auch auf ein fehlendes Semikolon in der Zeile davor, besonders bei [a, b] = [b, a].
Array-Muster nutzen das Iterator-Protokoll: Sie funktionieren mit Strings, Map, Set und Generatoren, aber nicht mit gewöhnlichen Objekten (TypeError: … is not iterable). Bei sehr heißen Codepfaden kann die Iteration minimal langsamer sein als Indexzugriff.
Rest-Elemente müssen am Ende stehen und dürfen kein abschließendes Komma haben. Objekt-Rest kopiert nur eigene, aufzählbare Eigenschaften (flach, ohne Prototyp).
Kompatibilität: Array-/Objekt-Destrukturierung ab ES2015, Objekt-Rest ab ES2018 – in allen modernen Browsern und Node.js unterstützt; für den Internet Explorer ist Transpilierung (z. B. Babel) nötig.

Siehe auch

Spread-Syntax (...) Rest-Parameter Standardparameter Object.entries() for...of Nullish-Coalescing-Operator (??) import.source()