Moderne Syntax
Destructuring, Spread und optionale Verkettung machen Code kürzer und robuster — Standard in modernem JavaScript.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Destructuring
Destructuring zieht Eigenschaften direkt in Variablen.
Funktioniert für Objekte und Arrays, auch mit Standardwerten und in Funktionsparametern.
const user = { name: 'Ada', xp: 120 };
const { name, xp } = user;
const [erste, zweite] = ['rot', 'grün'];Spread und Rest
Der Spread-Operator ...
breitet Arrays oder Objekte aus: kopieren, zusammenführen, erweitern.
Als Rest-Parameter sammelt ... übrige Argumente in einem Array.
const basis = { theme: 'dark' };
const einstellungen = { ...basis, sprache: 'de' };
const alle = [...listeA, ...listeB];Optionale Verkettung
?.
greift nur weiter zu, wenn der Wert davor nicht null oder undefined ist.
Zusammen mit ?? entstehen robuste Zugriffe ohne lange if-Ketten.
const stadt = user?.adresse?.stadt ?? 'Unbekannt';Vertiefung
Destructuring und Spread kopieren flach
Destructuring ist mehr als Abkürzung: Es macht sichtbar, welche Eigenschaften ein Objekt wirklich braucht. Standardwerte und Umbenennung helfen bei optionalen Daten.
Spread erzeugt flache Kopien. Bei verschachtelten Objekten musst du jede Ebene kopieren, sonst teilen Original und Kopie denselben inneren Zustand.
const basis = { theme: "dark", schrift: "groß" };
const neu = { ...basis, theme: "light" };
const stadt = user?.adresse?.stadt ?? "Unbekannt";Merksatz: Destructuring dokumentiert benötigte Daten. Spread kopiert flach; optionale Verkettung schützt vor null.
Übungsaufgabe
Einstellungen mergen
Führe Standardeinstellungen und Nutzereinstellungen zusammen. Entpacke theme und sprache per Destructuring und greife sicher auf eine optionale Adresse zu.
Das soll dein Programm können
- Spread zum Zusammenführen
- Destructuring mit Umbenennung
- Optionale Verkettung ?.
- Fallback mit ??
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
const { theme, sprache } = { ...standard, ...nutzer }; Der letzte Spread gewinnt.
Lösung anzeigen
const standard = { theme: "dark", sprache: "de", schrift: 16 };
const nutzer = { theme: "light" };
const profil = { adresse: null };
const einstellungen = { ...standard, ...nutzer };
const { theme, sprache: spracheCode } = einstellungen;
const stadt = profil?.adresse?.stadt ?? "Unbekannt";
console.log(theme, spracheCode, stadt);Warum funktioniert das?
Der rechte Spread überschreibt gleiche Schlüssel. sprache: spracheCode benennt die Variable um; ?. und ?? verhindern Fehler bei fehlenden Daten.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.