JavaScript Academy · Lektion

Mutationen vermeiden

Arbeiten Sie mit Kopien, statt Daten zu verändern.

Mutationen vermeiden 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.

Warum Sie Änderungen vermeiden sollten

Das Ändern gemeinsam genutzter Daten verursacht schwer nachvollziehbare Fehler: Eine Änderung an einer Stelle überrascht Code an anderer Stelle. Der funktionale Stil bevorzugt das Erstellen neuer Werte gegenüber dem Ändern vorhandener Werte (Unveränderlichkeit).

const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

Arrays mit Spread kopieren

Der Spread-Operator ... erstellt eine flache Kopie eines Arrays, sodass Sie Elemente hinzufügen können, ohne die Quelle zu verändern.

const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]

Objekte mit Spread kopieren

Spread funktioniert auch für Objekte und erzeugt ein neues Objekt mit denselben Eigenschaften sowie beliebigen Überschreibungen.

const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user);  // unchanged

Array-Methoden ohne Änderungen

Bevorzugen Sie Methoden, die neue Arrays zurückgeben: map, filter, concat und slice. Vermeiden Sie Methoden, die Änderungen vornehmen, etwa push, splice und sort direkt am Array.

const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a);      // [3, 1, 2]

Unveränderlich hinzufügen

Erstellen Sie statt push mit Spread oder concat ein neues Array.

const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]

Unveränderlich entfernen

Verwenden Sie filter, um ein neues Array ohne ein bestimmtes Element zu erzeugen, statt splice zu verwenden.

const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]

Ein Element unveränderlich aktualisieren

Um ein einzelnes Element zu ändern, wenden Sie map auf das Array an und geben für das passende Element einen neuen Wert zurück.

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

Flach vs. tief

Spread kopiert eine Ebene tief. Verschachtelte Objekte bleiben gemeinsam genutzte Referenzen. Um verschachtelte Daten unveränderlich zu aktualisieren, verwenden Sie Spread auf jeder Ebene, die Sie ändern.

const state = { user: { name: "Ada", age: 36 } };
const next = {
  ...state,
  user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age);  // 37

Für Sicherheit einfrieren

Object.freeze verhindert zur Laufzeit versehentliche Änderungen an einem Objekt und macht die Unveränderlichkeit explizit (eine Ebene tief).

const config = Object.freeze({ env: "prod" });
config.env = "dev";       // ignored in non-strict mode
console.log(config.env);  // "prod"

const bedeutet nicht Unveränderlichkeit

Ein häufiger Irrtum: const verhindert nur, dass die Variable neu zugewiesen wird, nicht dass der von ihr gehaltene Wert verändert wird. Ein mit const deklariertes Array kann weiterhin mit push verändert werden.

const arr = [1, 2];
arr.push(3);          // allowed - value mutated
console.log(arr);     // [1, 2, 3]
// arr = [] would throw

Zusammenfassung der Vorteile

Unveränderliche Aktualisierungen machen die Änderungsverfolgung trivial (durch den Vergleich von Referenzen), ermöglichen Rückgängigmachen und Wiederholen, verhindern unerwartete Auswirkungen an anderer Stelle und ergänzen sich auf natürliche Weise mit reinen Funktionen.

const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change

Kurzer Check

Änderungen vermeiden.

Zusammenfassung

Unveränderlichkeit bedeutet, neue Werte zu erstellen, statt vorhandene zu verändern. Verwenden Sie Spread, um Arrays und Objekte zu kopieren, bevorzugen Sie Methoden ohne Änderungen (map, filter, concat) und verwenden Sie Spread bei verschachtelten Aktualisierungen auf jeder Ebene. Denken Sie daran: const verhindert Neuzuweisungen, nicht Änderungen; Object.freeze bietet zusätzlichen Laufzeitschutz. Unveränderliche Aktualisierungen erleichtern die Änderungserkennung und das Schreiben reinen Codes.

Häufig gestellte Fragen

Ist die Lektion „Mutationen vermeiden“ kostenlos?

Ja — der vollständige Text von „Mutationen vermeiden“ 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 „Mutationen vermeiden“?

Arbeiten Sie mit Kopien, statt Daten zu verändern. 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 „Mutationen vermeiden“?

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