Veränderbar und Unveränderbar in JavaScript

Dieser Artikel erklärt die Konzepte von veränderbaren und unveränderbaren Werten in JavaScript.

YouTube Video

Veränderbar und Unveränderbar in JavaScript

Was bedeutet Veränderbar?

Veränderbar bedeutet, dass ein Wert geändert werden kann. Objekte und Arrays, die Referenztypen sind, sind typische Beispiele für veränderbare Datenstrukturen.

Beispiel für ein veränderbares Objekt

1let person = { name: "Alice", age: 25 };
2person.age = 26;
3console.log(person); // { name: "Alice", age: 26 }

In diesem Code wird die Eigenschaft age des Objekts person von 25 auf 26 geändert. Da Objekte per Referenz übergeben werden, wird der Inhalt an der Speicheradresse, die in der Variablen person gespeichert ist, geändert.

Beispiel für ein veränderbares Array

1let numbers = [1, 2, 3];
2numbers.push(4);
3console.log(numbers); // [1, 2, 3, 4]

In diesem Code wird die Methode push verwendet, um ein neues Element 4 zum ursprünglichen Array hinzuzufügen. Dies ändert das ursprüngliche Array, was es zu einer veränderbaren Operation macht.

Beispiel in einer Funktion

 1// Function to append a value to an array
 2function append(arr, value) {
 3    arr.push(value); // Modify the original array
 4    console.log(arr);
 5}
 6
 7let numbers = [1, 2, 3];
 8append(numbers, 4);
 9
10console.log(numbers); // [1, 2, 3, 4] (original array is modified)

Bei veränderbaren Operationen innerhalb einer Funktion wird auch das ursprüngliche Array geändert.

Was bedeutet Unveränderbar?

Unveränderbar bedeutet, dass ein Wert nicht geändert werden kann. Primitive Datentypen sind grundsätzlich unveränderbar.

Beispiel für einen unveränderbaren primitiven Datentyp

1let str = "hello";
2str[0] = "H";
3console.log(str); // "hello"

Der Versuch, das erste Zeichen des Strings str in H zu ändern, schlägt fehl, da Strings unveränderbar sind.

Beispiel in einer Funktion

 1// Function to increment a number
 2function increment(num) {
 3    num++; // This modifies only the local copy of num
 4    console.log(num);
 5}
 6
 7let number = 10;
 8increment(number);
 9
10console.log(number); // 10 (original number remains unchanged)

Da Zahlen unveränderbar sind, wirken sich Operationen innerhalb einer Funktion nicht auf die ursprüngliche Variable aus.

Unveränderbare Operationen auf Arrays

Arrays sind veränderbar, aber das Erstellen eines neuen Arrays anstelle der Änderung des ursprünglichen ermöglicht unveränderbare Operationen.

1// Create an array of numbers
2let numbers = [1, 2, 3];
3
4// Create a new array by spreading the original and adding a new element
5let newNumbers = [...numbers, 4];
6
7console.log(numbers); // [1, 2, 3] (original array is unchanged)
8console.log(newNumbers); // [1, 2, 3, 4] (new array with an added element)

Hier wird die Spread-Syntax (...) verwendet, um ein neues Array newNumbers zu erstellen. Da das ursprüngliche Array numbers nicht verändert wird, handelt es sich um eine unveränderliche Operation.

Vorteile der Verwendung unveränderlicher Datenstrukturen

Verbesserte Vorhersehbarkeit

Da unveränderliche Daten nicht geändert werden können, sind unerwartete Änderungen weniger wahrscheinlich, wodurch das Risiko von Fehlern reduziert wird.

Kompatibilität mit Bibliotheken, die auf Unveränderlichkeit basieren

Bibliotheken wie React und Redux sind oft mit unveränderlichen Daten konzipiert, was bei korrekter Nutzung die Zustandsverwaltung erleichtert.

Objekte mit Object.freeze unveränderlich machen

Object.freeze kann verwendet werden, um Änderungen an einem Objekt zu verhindern.

1// Create a frozen object (properties cannot be modified)
2const person = Object.freeze({ name: "Alice", age: 25 });
3
4// Attempt to modify a property (ignored in non-strict mode, error in strict mode)
5person.age = 26;
6
7console.log(person); // { name: "Alice", age: 25 }

Allerdings führt Object.freeze nur eine flache Sperre durch, was bedeutet, dass Eigenschaften von verschachtelten Objekten veränderlich bleiben.

1// Create a frozen object with a nested object
2const user = Object.freeze({ profile: { name: "Bob" } });
3
4// Attempt to modify a nested property (this works because Object.freeze() is shallow)
5user.profile.name = "Charlie";
6
7console.log(user.profile.name); // "Charlie" (nested object is still mutable)

Um ein vollständig unveränderliches Objekt zu erstellen, ist eine tiefe Sperre erforderlich.

 1// Function to deeply freeze an object, making all nested objects immutable
 2function deepFreeze(obj) {
 3  Object.keys(obj).forEach(key => {
 4    if (typeof obj[key] === "object" && obj[key] !== null) {
 5      deepFreeze(obj[key]); // Recursively freeze nested objects
 6    }
 7  });
 8  return Object.freeze(obj); // Freeze the top-level object
 9}
10
11// Create a deeply frozen object
12const user = deepFreeze({ profile: { name: "Bob" } });
13
14// Attempt to modify a nested property (ignored)
15user.profile.name = "Charlie";
16
17console.log(user.profile.name); // "Bob" (unchanged due to deep freeze)

Zusammenfassung

• Veränderliche Daten können geändert werden, einschließlich Objekte und Arrays.
• Unveränderliche Daten können nicht geändert werden, darunter primitive Typen wie Strings und Zahlen.
• Die Verwendung der Spread-Syntax oder von map ermöglicht Operationen mit unveränderlichen Daten..
• Object.freeze und deepFreeze können verwendet werden, um Änderungen an Objekten zu verhindern.
• Die Verwendung unveränderlicher Daten ermöglicht vorhersehbaren und weniger fehleranfälligen Code.

Ein unveränderliches Design verbessert die Sicherheit und Lesbarkeit des Codes, also nutzen Sie es gut!

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video