Destrukturierung

Wenn du mehrere Eigenschaften eines Objekts brauchst, schreibst du oft für jede eine Zeile:

const leo = { name: "Leo", art: "Löwe", alter: 6 };
const name = leo.name;
const alter = leo.alter;

Die Destrukturierung (englisch destructuring) macht dasselbe in einer Zeile:

const leo = { name: "Leo", art: "Löwe", alter: 6 };
const { name, alter } = leo;
console.log(`${name} ist ${alter} Jahre alt.`);

Leo ist 6 Jahre alt.

Links vom = stehen in geschweiften Klammern die Eigenschaften, die du aus dem Objekt herausnehmen willst. JavaScript erstellt für jede eine Variable mit dem Namen und dem Wert der Eigenschaft. Die Reihenfolge in den Klammern spielt keine Rolle: { alter, name } funktioniert genauso. Das Objekt bleibt, wie es war, und die Eigenschaften, die du nicht nennst, wie hier art, bekommen einfach keine Variable.

Auch Arrays kannst du destrukturieren, mit eckigen Klammern. Hier zählt die Reihenfolge: Die erste Variable bekommt das erste Element, die zweite Variable das zweite Element und so weiter:

const jahre = [12, 6, 4, 2];
const [erstes, zweites] = jahre;
console.log(erstes, zweites);

12 6

Das passt gut zum Sortieren. Sortiere eine Kopie eines Arrays und nimm die Elemente ganz oben heraus:

const [juengstes, zweitJuengstes] = [...tiere].sort((a, b) => a.alter - b.alter);
console.log(juengstes.name, zweitJuengstes.name);

Pip Gina

Typische Fehler:

• Ein Name in den geschweiften Klammern, der kein Schlüssel des Objekts ist. const { Name } = leo; gibt Name den Wert undefined, weil der Schlüssel name heißt, mit kleinem n.
• Eine Variable, die es schon gibt. Die Destrukturierung erstellt neue Variablen. Wenn das Programm also schon ein const name hat, endet const { name } = leo; mit SyntaxError: Identifier 'name' has already been declared. Entferne die alte Zeile.