Destructuring

Bisher hast du Werte einzeln aus einem Objekt geholt, eine Zeile je Wert. Destructuring macht daraus eine Zeile für alle, und nebenbei fällt eine Schreibweise ab, die den Rest des Kurses prägt.

01 / 04Ein Muster statt einer Zuweisung

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const kurs = { titel: "JavaScript", stunden: 47, frei: true };

// So ging es bisher: eine Zeile je Wert.
const titelAlt = kurs.titel;
const stundenAlt = kurs.stunden;
console.log(titelAlt, stundenAlt);

// Und so mit Destructuring. Links steht ein Muster,
// rechts das Objekt.
const { titel, stunden } = kurs;
console.log(titel, stunden);

// Die Namen links müssen den Schlüsseln entsprechen.
// Was es nicht gibt, wird undefined, ohne Fehler.
const { preis } = kurs;
console.log("preis:", preis);

// Du musst nicht alles herausholen, nur was du brauchst.
const { frei } = kurs;
console.log("frei:", frei);

const { titel, stunden } = kurs sieht aus wie ein Objekt, das man anlegt, und ist das Gegenteil davon.

Links vom Gleichheitszeichen steht kein Objekt, sondern ein Muster. Es sagt nicht, was gebaut werden soll, sondern welche Eigenschaften herausgeholt werden. Die Namen darin müssen den Schlüsseln entsprechen, denn genau danach wird gesucht.

Was du nicht aufschreibst, wird auch nicht geholt. Du kannst also drei Eigenschaften nehmen und die restlichen sieben liegen lassen, ohne sie zu erwähnen.

Steht im Muster ein Name, den es im Objekt nicht gibt, ist das kein Fehler. Die Variable bekommt undefined, genau wie beim normalen Zugriff aus Lektion 7.1.

02 / 04Umbenennen und Standardwerte

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const kurs = { titel: "JavaScript", stunden: 47 };

// Umbenennen mit Doppelpunkt: links der Schlüssel,
// rechts der neue Name.
const { titel: name, stunden: dauer } = kurs;
console.log(name, dauer);

// Standardwert mit Gleichheitszeichen. Er greift nur,
// wenn die Eigenschaft undefined ist.
const { badge = "Frei" } = kurs;
console.log("badge:", badge);

// Beides zusammen: erst umbenennen, dann der Standardwert.
const { badge: abzeichen = "Frei" } = kurs;
console.log("abzeichen:", abzeichen);

// Ist die Eigenschaft da, gewinnt sie. Auch wenn sie null ist:
// der Standardwert greift bei null nicht.
const mitNull = { badge: null };
const { badge: b = "Frei" } = mitNull;
console.log("bei null:", b);

Zwei Dinge, die man fast immer zusammen braucht.

Der Doppelpunkt benennt um. const { titel: name } = kurs sucht nach titel und legt den Wert unter name ab. Die Reihenfolge fühlt sich zuerst verkehrt an, ist aber dieselbe wie beim Anlegen eines Objekts: links der Schlüssel, rechts das, was damit passiert.

Das Gleichheitszeichen setzt einen Standardwert. Er greift, wenn die Eigenschaft undefined ist, also fehlt oder ausdrücklich auf undefined steht. Beides zusammen schreibt sich { badge: abzeichen = "Frei" }, und das liest man als „hol badge, nenn es abzeichen, und wenn es fehlt, nimm Frei”.

Bei null greift der Standardwert nicht. Das ist derselbe Unterschied wie bei ?? aus Lektion 7.4: null heißt „hier ist absichtlich nichts”, und eine Absicht überschreibt man nicht ungefragt. Wer das nicht will, braucht ein ?? dahinter.

03 / 04Dasselbe für Listen

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

const kurse = ["HTML", "CSS", "JavaScript", "Node"];

// Eckige Klammern statt geschweifter. Hier zählt die Position,
// die Namen darfst du frei wählen.
const [erster, zweiter] = kurse;
console.log(erster, zweiter);

// Eine Stelle überspringen: ein Komma ohne Namen davor.
const [, , dritter] = kurse;
console.log("dritter:", dritter);

// Der Tausch zweier Werte in einer Zeile.
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log("getauscht:", a, b);

// Ohne Destructuring bräuchte man dafür eine Hilfsvariable.
let c = 1;
let d = 2;
const merker = c;
c = d;
d = merker;
console.log("von Hand:", c, d);

Mit eckigen Klammern funktioniert es genauso, nur zählt hier nicht der Name, sondern die Position. Die Namen links darfst du deshalb frei wählen, denn die Liste hat keine.

Eine Stelle überspringst du mit einem Komma ohne Namen davor. Das sieht seltsam aus und kommt selten vor, aber wenn es vorkommt, ist es die kürzeste Fassung.

Der bekannteste Trick daraus ist der Tausch zweier Werte in einer Zeile: [a, b] = [b, a]. Rechts wird zuerst eine kleine Liste gebaut, links wird sie sofort wieder auseinandergenommen, und weil das in dieser Reihenfolge passiert, braucht es keine Hilfsvariable. Das Beispiel zeigt daneben, wie umständlich derselbe Tausch von Hand aussieht.

04 / 04Der Ort, an dem es sich wirklich lohnt

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Ohne Destructuring: die Funktion greift innen zu.
function zeileAlt(kurs) {
  return `${kurs.titel}: ${kurs.stunden} Stunden`;
}

// Mit Destructuring in der Signatur: man sieht von außen,
// welche Felder die Funktion überhaupt braucht.
function zeile({ titel, stunden }) {
  return `${titel}: ${stunden} Stunden`;
}

const kurs = { titel: "JavaScript", stunden: 47, frei: true };
console.log(zeileAlt(kurs));
console.log(zeile(kurs));

// Der eigentliche Gewinn zeigt sich beim Aufruf: benannte
// Argumente statt einer Reihe, deren Bedeutung man raten muss.
function anlegen({ titel, stunden = 10, frei = false }) {
  return `${titel}, ${stunden} h, frei: ${frei}`;
}

console.log(anlegen({ titel: "CSS", frei: true }));
console.log(anlegen({ titel: "Kurz" }));

Ein Muster darf überall dort stehen, wo ein Name stehen darf, und das gilt auch für Parameter.

Eine Funktion, die ({ titel, stunden }) in der Signatur trägt, sagt von außen, welche Felder sie braucht. Das ist mehr wert, als es aussieht: bei function zeile(kurs) muss man den Rumpf lesen, um das zu erfahren.

Der größere Gewinn steht auf der Aufrufseite. anlegen({ titel: "CSS", frei: true }) ist ohne Doku verständlich, anlegen("CSS", 10, true) nicht. Man sieht dem zweiten Aufruf nicht an, was die 10 bedeutet, und ob die Reihenfolge stimmt, weiß man erst nach einem Blick in die Funktion.

Deshalb ist das die übliche Form, sobald eine Funktion mehr als zwei Argumente hat. Zusammen mit den Standardwerten aus Lektion 5.5 lässt sich damit ein Aufruf schreiben, der nur die Felder nennt, die vom Üblichen abweichen.