JavaScript Academy · Lektion

Muster für unveränderliche Updates

Aktualisieren Sie Daten, indem Sie neue Kopien erstellen.

Muster für unveränderliche Updates ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Aktualisieren ohne Mutation

Unveränderliche Aktualisierungen erstellen eine neue Kopie mit der angewendeten Änderung, während das ursprüngliche Objekt unverändert bleibt. Das ist der Kern einer vorhersehbaren Zustandsverwaltung in modernem JavaScript.

Der Spread-Operator ... ist dafür das wichtigste Werkzeug.

Ein Objekt mit Spread kopieren

Übernehmen Sie ein Objekt per Spread in ein neues Objekt und überschreiben Sie anschließend eine Eigenschaft. Das ursprüngliche Objekt behält seinen alten Wert.

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

Es sind unterschiedliche Objekte

Die Kopie ist ein vollständig neues Objekt und nicht dieselbe Referenz. Ein Identitätsvergleich bestätigt das.

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

Eine Eigenschaft unveränderlich hinzufügen

Um ein Feld hinzuzufügen, übernehmen Sie das alte Objekt per Spread und fügen den neuen Schlüssel ein. Das ursprüngliche Objekt erhält dadurch nichts.

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

Eine Eigenschaft unveränderlich entfernen

Verwenden Sie Destrukturierung, um den unerwünschten Schlüssel herauszulösen und den Rest aufzufangen. Das Restobjekt enthält den Schlüssel nicht.

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

Arrays mit Spread kopieren

Übernehmen Sie ein Array per Spread, um es zu kopieren. Methoden wie map und filter geben ebenfalls neue Arrays zurück und verändern niemals das Ausgangsarray.

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

Ein Array unveränderlich erweitern

Erstellen Sie statt mit push, das eine Mutation vornimmt, per Spread ein neues Array. Die Länge des ursprünglichen Arrays bleibt gleich.

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

Ein Element unveränderlich aus einem Array entfernen

Verwenden Sie filter, um ein neues Array ohne das unerwünschte Element zu erzeugen, während das ursprüngliche Array unverändert bleibt.

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

Verschachtelte Objekte aktualisieren

Für verschachtelte Aktualisierungen müssen Sie jede geänderte Ebene per Spread kopieren. Nur der betroffene Zweig wird neu erstellt; der Rest wird per Referenz geteilt.

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

Ein Element in einem Array aktualisieren

Verwenden Sie map, um für das passende Element eine geänderte Kopie und für alle anderen Elemente das ursprüngliche Element zurückzugeben. Kein Element wird verändert.

const todos = [
  { id: 1, done: false },
  { id: 2, done: false }
];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

console.log(todos[1].done);
console.log(updated[1].done);

Warum unveränderliche Aktualisierungen wichtig sind

Wenn gemeinsamer Zustand niemals verändert wird, ist die Erkennung von Änderungen kostengünstig, weil Referenzen verglichen werden können. Außerdem werden Rückgängig/Wiederholen ermöglicht und Fehler durch unerwartete Fernwirkungen verhindert. Das Muster lautet: kopieren, dann die Kopie ändern. Für tiefe Kopien behandelt die nächste Lektion structuredClone.

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

Kurze Überprüfung

Was erzeugt { ...user, age: 37 }, wenn user bereits ein age enthält?

Zusammenfassung: Muster für unveränderliche Aktualisierungen

Sie haben gelernt, Aktualisierungen ohne Mutationen durchzuführen:

Verwenden Sie Spread mit { ...obj, key: value }, um zu kopieren und einen Wert zu überschreiben.
Destrukturieren Sie den Rest, um eine Eigenschaft unveränderlich zu entfernen.
Verwenden Sie map, filter und Spread für Arrays statt push/splice.
Verwenden Sie Spread auf jeder Ebene für verschachtelte Aktualisierungen und teilen Sie den Rest per Referenz.

Häufig gestellte Fragen

Ist die Lektion „Muster für unveränderliche Updates“ kostenlos?

Ja — der vollständige Text von „Muster für unveränderliche Updates“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Muster für unveränderliche Updates“?

Aktualisieren Sie Daten, indem Sie neue Kopien erstellen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Muster für unveränderliche Updates“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy