Mutable et Immutable en JavaScript

Cet article explique les concepts de mutable et immutable en JavaScript.

YouTube Video

Mutable et Immutable en JavaScript

Qu'est-ce qu'un Mutable ?

Mutable signifie qu'une valeur peut être modifiée. Les objets et les tableaux, qui sont des types par référence, sont des exemples typiques de structures de données mutables.

Exemple d'un Objet Mutable

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

Dans ce code, la propriété age de l'objet person est modifiée de 25 à 26. Comme les objets sont passés par référence, le contenu à l'adresse mémoire stockée dans la variable person est modifié.

Exemple d'un Tableau Mutable

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

Dans ce code, la méthode push est utilisée pour ajouter un nouvel élément 4 au tableau original. Cela modifie le tableau original, en faisant une opération mutable.

Exemple dans une Fonction

 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)

Lorsqu'on effectue des opérations mutables dans une fonction, le tableau original est également modifié.

Qu'est-ce qu'un Immutable ?

Immutable signifie qu'une valeur ne peut pas être modifiée. Les types primitifs sont fondamentalement immutables.

Exemple d'un Type Primitif Immutable

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

Essayer de changer le premier caractère de la chaîne str en H échoue parce que les chaînes sont immutables.

Exemple dans une Fonction

 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)

Comme les nombres sont immutables, les opérations à l'intérieur d'une fonction n'affectent pas la variable originale.

Opérations Immutables sur les Tableaux

Les tableaux sont mutables, mais créer un nouveau tableau au lieu de modifier l'original permet des opérations immutables.

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)

Ici, la syntaxe de propagation (...) est utilisée pour créer un nouveau tableau newNumbers. Étant donné que le tableau original numbers n'est pas modifié, il s'agit d'une opération immuable.

Avantages de l'utilisation des structures de données immuables

Prédictibilité améliorée

Étant donné que les données immuables ne peuvent pas être modifiées, les modifications inattendues sont moins probables, réduisant ainsi le risque de bugs.

Compatibilité avec les bibliothèques basées sur l'immuabilité

Les bibliothèques comme React et Redux sont souvent conçues avec des données immuables en tête, ce qui facilite la gestion d'état lorsqu'elles sont utilisées correctement.

Rendre les objets immuables avec Object.freeze

Object.freeze peut être utilisé pour empêcher les modifications d'un objet.

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 }

Cependant, Object.freeze applique un gel superficiel, ce qui signifie que les propriétés des objets imbriqués restent modifiables.

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)

Pour créer un objet entièrement immuable, un gel profond est nécessaire.

 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)

Résumé

• Les données mutables peuvent être modifiées, y compris les objets et les tableaux.
• Les données immuables ne peuvent pas être modifiées, y compris les types primitifs tels que les chaînes de caractères et les nombres.
• L'utilisation de la syntaxe de propagation ou de map permet des opérations sur des données immuables..
• Object.freeze et deepFreeze peuvent être utilisés pour empêcher les modifications des objets.
• L'utilisation de données immuables permet d'avoir un code plus prévisible et moins sujet aux erreurs.

Le design immuable améliore la sécurité et la lisibilité du code, alors utilisez-le à bon escient !

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video