En programmation, la mutation d’objet implique que l’état ou les données d’un objet sont mutés après sa création. En d’autres termes, l’opération qui change les attributs d’un objet en JavaScript est connue sous le nom de mutation d’objet. La mutation d’objet modifie directement les valeurs d’un objet, ce qui rend la situation difficile, notamment dans les applications où plusieurs opérations peuvent essayer de lire ou d’écrire dans un objet simultanément.
Cet article présente une discussion sur la mutation d’objet en JavaScript avec des exemples de code pertinents lorsque cela est nécessaire.
Types de données en JavaScript
Les types de données désignent le type de données qu’une variable ou un objet peut contenir. JavaScript prend en charge deux catégories distinctes de types de données : les types primitifs et les types définis par l’utilisateur ou types de référence.
Types de données primitifs
En JavaScript, tous les types de données primitifs sont immuables par nature, c’est-à-dire que vous ne pouvez pas les modifier après leur création. Les nombres, les booléens, les chaînes de caractères, les Bigints, les Undefined, les Null, les Symboles et les Objets sont des exemples de types primitifs.
Types de données définis par l’utilisateur ou types de référence
Les types de données définis par l’utilisateur ou types de référence sont des objets créés en utilisant des types primitifs ou une combinaison de types primitifs et définis par l’utilisateur. Des exemples typiques de types définis par l’utilisateur ou types de référence sont les objets et les tableaux.
Comment les variables sont assignées et réassignées en JavaScript
Lorsque vous affectez une variable de type primitif à une variable de type primitif, les deux variables contiennent des valeurs similaires, mais elles sont stockées à des emplacements de stockage différents. Par exemple, supposez que vous ayez deux variables varA et varB et que vous affectiez une variable à une autre de la manière suivante :
var varA = 100;
var varB = varA;
console.log(varB);
Lorsque vous exécutez le morceau de code précédent, le nombre 100 s’affichera sur la console. Maintenant, vous modifiez les valeurs de l’une des deux variables (disons varB) comme indiqué ici.
var varA = 100;
var varB = varA;
varB = 500;
console.log(varA);
Notez comment la valeur de la variable varB a été modifiée en 500. Lorsque vous imprimez la valeur de varA, elle affichera toujours 100. Cela est dû au fait que ces variables varA et varB sont stockées à deux emplacements mémoire différents. Ainsi, si vous en modifiez une, la nouvelle valeur ou la modification ne sera pas reflétée sur les autres variables.
Qu’est-ce que la mutation d’objet en JavaScript ?
En JavaScript, le type de données d’un objet peut appartenir à l’une des deux catégories : primitif ou non primitif. Alors que les types primitifs sont immuables, c’est-à-dire que vous ne pouvez pas les modifier après les avoir créés, vous pouvez modifier les types non primitifs, c’est-à-dire les objets et les tableaux. Les objets permettent toujours que leurs valeurs soient modifiées. Ainsi, vous pouvez modifier l’état des champs pour un type mutable sans créer une nouvelle instance.
Les mutations d’objet peuvent créer plusieurs problèmes, tels que les suivants :
- Les objets mutés peuvent souvent entraîner des conditions de concurrence en raison de problèmes de concurrence et de sécurité des threads
- La mutation peut introduire des complexités dans le code source en raison de problèmes de prévisibilité et de sécurité des threads
- La mutation peut souvent conduire à des bogues difficiles à identifier dans le code source de l’application
- La mutation rend le test et le débogage du code difficiles car le suivi du code qui utilise la mutation devient un défi
Exemples de code qui démontrent la mutation d’objet
La mutation d’objet peut se produire dans l’un des scénarios suivants :
- Ajout, modification ou suppression de propriétés
- Utilisation de méthodes pouvant exhiber une mutation
Lorsque vous modifiez les propriétés d’un objet, que ce soit directement ou indirectement, vous êtes essentiellement en train de muter l’objet. L’extrait de code suivant montre comment vous pouvez muter un objet en changeant sa propriété.
const author = { id: 1, name: "Joydip Kanjilal"};
author.id = 2; author.city = "Hyderabad, INDIA";
console.log(author);
Dans le morceau de code précédent, nous créons un objet nommé auteur qui contient deux propriétés, à savoir, id et name. Alors que la propriété id est utilisée pour stocker l’id de l’enregistrement de l’auteur, la propriété name stocke le nom de l’auteur. Notez comment nous mutons l’objet auteur en modifiant la valeur correspondant à la propriété id. Ensuite, nous ajoutons une nouvelle propriété, nommée ville, à l’objet auteur et assignons une valeur à cette propriété.
Lorsque vous exécutez le morceau de code précédent, les propriétés et leurs valeurs de l’objet auteur seront affichées comme suit :
{ name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA' }
Lorsque vous passez un objet à une fonction ou l’assignez à une variable en JavaScript, vous passez essentiellement la référence à l’objet et non une copie de celui-ci. Cela implique que tout changement apporté au nouvel objet créé en passant un objet ou en l’assignant à la variable s’appliquera à toutes les références de l’objet réel.
Considérez le morceau de code suivant qui montre comment vous pouvez créer un objet en JavaScript et ensuite l’assigner à une variable.
const objA = { id: 1, name: 'Joydip Kanjilal',
city: 'Hyderabad, INDIA', pincode: 500089 }
const objB = objA;
objB.pincode = 500034;
console.log(objA);
Dans le morceau de code précédent, l’objet objA est assigné à objB, et la valeur de la propriété pincode de objA est modifiée, c’est-à-dire que l’objet objA est muté. Lorsque vous exécutez le programme, les données suivantes seront affichées.
{ id: 1, name: 'Joydip Kanjilal', city: 'Hyderabad, INDIA', pincode: 500034 }
Notez que la valeur de la propriété pincode a été modifiée.
Prévenir la mutation d’objets en JavaScript
En JavaScript, vous pouvez empêcher la mutation de plusieurs façons, telles que les suivantes :
- Utiliser le clonage d’objets en tirant parti de la méthode
Object.assign()ou de l’opérateur de propagation (…) - Utiliser la méthode
Object.seal()pour empêcher l’ajout ou la suppression de propriétés d’un objet - Utiliser la méthode
Object.freeze()pour empêcher l’ajout, la modification ou la suppression de propriétés d’un objet
Utiliser le Clonage
Référez-vous au morceau de code suivant qui montre comment vous pouvez cloner un objet en JavaScript en utilisant l’opérateur de propagation.
let originalObj = { x: 10, y: 100 }; let clonedObj = { originalObj };
Ici, le nom de l’objet cloné est clonedObj, et il est identique à l’objet original nommé originalObj. Ainsi, si vous affichez les valeurs des deux propriétés de ces deux objets, les résultats seront les mêmes.
À présent, modifiez la valeur de l’une des propriétés de l’objet cloné nommé clonedObj avec la valeur de votre choix, comme indiqué dans le morceau de code donné ci-dessous.
clonedObj.x = 50;
Ensuite, écrivez le morceau de code suivant pour afficher la valeur de la propriété nommée x concernant les deux objets originalObj et clonedObj.
console.log(originalObj.x);
console.log(clonedObj.x);
Lorsque vous exécutez le programme, vous remarquerez que la valeur de la propriété x dans l’objet original n’a pas changé. Les valeurs seront affichées dans la console comme indiqué ci-dessous :
10
50
Utilisation de la méthode Object.freeze()
La méthode Object.freeze() peut rendre un objet immuable en empêchant toute altération de ses propriétés.
const author = { id: 1, name: "Joydip Kanjilal",
city: "Hyderabad", state: "Telengana",
country: "India", pincode: 500089};
Object.freeze(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560010;
console.log(author);
Lorsque vous exécutez le morceau de code précédent, les résultats seront similaires à ceci:
{
id: 1,
name: 'Joydip Kanjilal',
city: 'Hyderabad',
state: 'Telangana',
country: 'India',
pincode: 500089
}
Comme vous pouvez le constater à partir de la sortie, même si vous avez attribué des valeurs aux propriétés city et state, et pincode, il n’y a aucun effet. Ainsi, aucune modification n’a été apportée aux données contenues dans aucune des propriétés de l’objet.
Utilisation de la méthode Object.seal()
Vous pouvez également utiliser la méthode Object.seal() pour empêcher la mutation d’objet en JavaScript. Cette méthode vous permettrait de modifier les valeurs des propriétés existantes, mais vous ne pouvez pas modifier ou supprimer l’une des propriétés de l’objet. L’exemple de code suivant illustre ceci:
const author = { id: 1, name: "Joydip Kanjilal",
city: "Hyderabad", state: "Telangana",
country: "India", pincode: 500089};
Object.seal(author);
author.city = "Bangalore";
author.state = "Karnataka";
author.pincode = 560005;
author.booksauthored = 3;
console.log(author);
Dans l’extrait de code précédent, bien que les modifications des propriétés de l’objet nommé auteur seront autorisées, ni l’ajout ni la suppression des propriétés de l’objet ne seront autorisés. Lorsque vous exécutez le programme, vous verrez que les valeurs des propriétés modifiées sont reflétées dans le résultat, mais les instructions qui ajoutent ou suppriment des propriétés sont ignorées. Voici à quoi ressemblerait la sortie dans la console :
{
id: 1,
name: 'Joydip Kanjilal',
city: 'Bangalore',
state: 'Karnataka',
country: 'India',
pincode: 560005
}
Utilisation de la méthode Object.defineProperty()
Vous pouvez également tirer parti de la méthode Object.defineProperty() en JavaScript pour contrôler la mutabilité des propriétés individuelles d’un objet. L’extrait de code suivant montre comment vous pouvez utiliser cette méthode pour interdire les modifications de la valeur contenue dans une propriété dont la mutabilité est restreinte.
const author = { id: 1, name: "Joydip Kanjilal"};
Object.defineProperty(author, "booksauthored",
{
value: 3,
writable: false,
});
author.booksauthored = 5;
console.log(author.booksauthored);
Lorsque vous exécutez le morceau de code précédent, vous verrez que le nombre 3 est affiché sur la console.
Points clés
- JavaScript catégorise les types d’objets en deux catégories distinctes : primitives (mutables) et objets (immuables).
- Le terme mutation d’objet fait référence aux opérations qui altèrent ou modifient un objet après sa création.
- Alors que les valeurs primitives telles que les nombres, etc., ne peuvent pas être modifiées, vous pouvez toujours modifier des objets une fois qu’ils ont été créés.
- Étant donné que les chaînes de caractères en JavaScript sont immuables, vous ne pouvez pas les modifier une fois qu’elles ont été créées.
- Bien que la mutation en soi ne soit pas si mal, vous devriez la gérer avec soin pour réduire les bogues dans vos applications.
- Vous pouvez réduire ou éliminer la mutation en JavaScript en suivant les pratiques recommandées et en tirant parti des structures de données immuables.
Source:
https://dzone.com/articles/an-introduction-to-object-mutation-in-javascript