Veranderlijk en Onveranderlijk in JavaScript

Dit artikel legt de concepten van veranderlijk en onveranderlijk uit in JavaScript.

YouTube Video

Veranderlijk en Onveranderlijk in JavaScript

Wat is Veranderlijk?

Veranderlijk betekent dat een waarde kan worden aangepast. Objecten en arrays, die referentietypen zijn, zijn typische voorbeelden van veranderlijke datastructuren.

Voorbeeld van een Veranderlijk Object

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

In deze code wordt de eigenschap age van het person object gewijzigd van 25 naar 26. Aangezien objecten door referentie worden doorgegeven, wordt de inhoud op het geheugenadres opgeslagen in de person variabele aangepast.

Voorbeeld van een Veranderlijke Array

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

In deze code wordt de push methode gebruikt om een nieuw element 4 aan de originele array toe te voegen. Dit wijzigt de originele array, waardoor het een veranderlijke operatie is.

Voorbeeld in een Functie

 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)

Bij het uitvoeren van veranderlijke operaties in een functie wordt de originele array ook aangepast.

Wat is Onveranderlijk?

Onveranderlijk betekent dat een waarde niet kan worden aangepast. Primitieve typen zijn fundamenteel onveranderlijk.

Voorbeeld van een Onveranderlijk Primitief Type

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

Pogingen om het eerste teken van de string str te wijzigen in H mislukken omdat strings onveranderlijk zijn.

Voorbeeld in een Functie

 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)

Aangezien getallen onveranderlijk zijn, hebben operaties binnen een functie geen invloed op de originele variabele.

Onveranderlijke Operaties op Arrays

Arrays zijn veranderlijk, maar het maken van een nieuwe array in plaats van de originele aan te passen maakt onveranderlijke operaties mogelijk.

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 wordt de spread-syntax (...) gebruikt om een nieuwe array newNumbers te maken. Omdat de oorspronkelijke numbers array niet wordt aangepast, is dit een immutabele operatie.

Voordelen van het gebruik van immutabele datastructuren

Verbeterde voorspelbaarheid

Omdat immutabele data niet kan worden gewijzigd, zijn onverwachte wijzigingen minder waarschijnlijk, wat het risico op bugs vermindert.

Compatibiliteit met bibliotheken gebaseerd op immutabiliteit

Bibliotheken zoals React en Redux zijn vaak ontworpen met immutabele data in gedachten, wat state-management eenvoudiger maakt bij correct gebruik.

Objecten immutabel maken met Object.freeze

Object.freeze kan worden gebruikt om wijzigingen aan een object te voorkomen.

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 }

Echter, Object.freeze voert een shallow freeze uit, wat betekent dat eigenschappen van geneste objecten mutabel blijven.

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)

Om een volledig immutabel object te creëren, is een deep freeze nodig.

 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)

Samenvatting

• Mutabele data kan worden gewijzigd, zoals objecten en arrays.
• Immutabele data kan niet worden gewijzigd, inclusief primitieve typen zoals strings en nummers.
• Het gebruik van spread-syntax of map maakt immutabele dataverwerkingen mogelijk..
• Object.freeze en deepFreeze kunnen worden gebruikt om wijzigingen aan objecten te voorkomen.
• Het gebruik van immutabele data zorgt voor meer voorspelbare en minder foutgevoelige code.

Een immutabel ontwerp verbetert de veiligheid en leesbaarheid van de code, dus maak er goed gebruik van!

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video