Mutable og Immutable i JavaScript

Denne artikel forklarer mutable og immutable begreber i JavaScript.

YouTube Video

Mutable og Immutable i JavaScript

Hvad er Mutable?

Mutable betyder, at en værdi kan ændres. Objekter og arrays, som er referencetyper, er typiske eksempler på mutable datastrukturer.

Eksempel på et Mutable Objekt

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

I denne kode ændres age-egenskaben for person-objektet fra 25 til 26. Da objekter passeres som reference, ændres indholdet på den hukommelsesadresse, der er gemt i variablen person.

Eksempel på et Mutable Array

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

I denne kode bruges push-metoden til at tilføje et nyt element 4 til det originale array. Dette ændrer det originale array, hvilket gør det til en mutable operation.

Eksempel i en 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)

Når der udføres mutable operationer inde i en funktion, ændres det originale array også.

Hvad er Immutable?

Immutable betyder, at en værdi ikke kan ændres. Primære typer er fundamentalt immutable.

Eksempel på en Immutable Primær Type

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

Et forsøg på at ændre det første tegn i strengen str til H fejler, fordi strenge er immutable.

Eksempel i en 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 tal er immutable, påvirker operationer i en funktion ikke den originale variabel.

Immutable Operationer på Arrays

Arrays er mutable, men at oprette et nyt array i stedet for at ændre det originale muliggør immutable operationer.

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)

Her bruges spread-syntaksen (...) til at oprette en ny array newNumbers. Da den oprindelige numbers array ikke ændres, er dette en immutabel operation.

Fordele ved at bruge immutabel datastrukturer

Forbedret forudsigelighed

Da immutabel data ikke kan ændres, er uventede ændringer mindre sandsynlige, hvilket reducerer risikoen for fejl.

Kompatibilitet med biblioteker baseret på immutabilitet

Biblioteker som React og Redux er ofte designet med immutabel data i tankerne, hvilket gør tilstandsstyring lettere, når det bruges korrekt.

Gør objekter immutabel med Object.freeze

Object.freeze kan bruges til at forhindre ændringer i et objekt.

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 }

Dog udfører Object.freeze en overfladisk frysning, hvilket betyder, at egenskaber i indlejrede objekter forbliver mutable.

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)

For at skabe et fuldstændigt immutabelt objekt kræves en dyb frysning.

 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)

Sammendrag

• Mutable data kan ændres, herunder objekter og arrays.
• Immutabel data kan ikke ændres, herunder primitive typer som strings og tal.
• Brug af spread-syntaks eller map muliggør immutabel dataoperationer..
• Object.freeze og deepFreeze kan bruges til at forhindre ændringer i objekter.
• Brug af immutabel data giver mere forudsigelig og mindre fejlsikker kode.

Immutabelt design forbedrer kode-sikkerhed og læsbarhed, så brug det med fordel!

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video