En JavaScript, les objets sont passés par référence, ce qui signifie que lorsque vous affectez un objet à une variable, vous ne faites qu'affecter un pointeur vers l'objet en mémoire. Cela peut être utile dans certains cas, mais dans d'autres, cela peut entraîner un comportement inattendu, en particulier lorsque vous essayez de créer une copie complète d'un objet. Une copie complète est une copie de l'objet qui crée un nouvel objet avec les mêmes valeurs que l'original, mais avec tous les objets et tableaux imbriqués également copiés. Dans cet article, nous allons explorer comment créer une copie d'objet en profondeur en JavaScript.

La première approche naïve pour copier un objet en Javascript consiste à l'affecter à une nouvelle variable comme celle-ci :

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
};

const objCopy = obj;

objCopy.role = 'Writer';

console.log(objCopy) // { name: 'Jane Doe', role: 'Writer' }
console.log(obj) // { name: 'Jane Doe', role: 'Writer' }

OPÉRATEUR DE DIFFUSION

Nous pouvons utiliser la syntaxe de l'opérateur de propagation fournie par Javascript en utilisant la syntaxe suivante :

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
};

const objCopy = { ...obj };

Lorsque vous utilisez l'opérateur de propagation pour copier un objet ou un tableau, nous nous retrouvons avec deux objets ou tableaux différents. Donc, si on fait la même manipulation que précédemment comme ça :

objCopy.role = 'Writer';

console.log(objCopy) // { name: 'Jane Doe', role: 'Developer' }
console.log(obj) // { name: 'Jane Doe', role: 'Writer' }

La syntaxe de l'opérateur de propagation créera une copie complète d'un objet d'un seul niveau de profondeur. Qu'est-ce que ça veut dire ? Disons que notre premier objet « obj » a une autre propriété « contact » qui est aussi un objet qui contient l'email de l'utilisateur :

const obj = {
  name: 'Jane Doe',
  role: 'Developer',
  contact: {
    email: '[email protected]',
  },
};

const objCopy = obj;

objCopy.contact.email = '[email protected]';

console.log(obj); // { name: 'Jane Doe', role: 'Developer', contact: { email: '[email protected]' }, }
console.log(obj); // { name: 'Jane Doe', role: 'Developer', contact: { email: '[email protected]' }, }

Existe-t-il un moyen de faire une copie profonde à tous les niveaux (objet imbriqué) en Javascript  ? Eh bien, il existe un moyen, mais on parle parfois d'astuce.

JSON.parse et JSON.stringify

Une autre façon de faire une copie complète d'un objet en JavaScript consiste à utiliser JSON.parse et JSON.stringify. JSON.stringify convertit un objet JavaScript en une chaîne JSON, tandis que JSON.parse convertit une chaîne JSON en un objet JavaScript. En utilisant ces deux fonctions ensemble, vous pouvez créer une copie complète d'un objet.

Voici un exemple de la façon de faire une copie complète d'un objet en utilisant JSON.parse et JSON.stringify :

const objCopy = JSON.parse(JSON.stringify(obj));

Conclusion

En conclusion, faire une copie complète d'un objet en JavaScript peut être délicat en raison de la façon dont les objets sont passés par référence. Cependant, en utilisant l'opérateur de propagation ou JSON.parse et JSON.stringify, vous pouvez créer une copie complète d'un objet avec tous les objets et tableaux imbriqués également copiés en profondeur. Choisissez la méthode qui convient le mieux à votre cas d'utilisation et assurez-vous de tester soigneusement votre code pour vous assurer que votre copie en profondeur fonctionne comme prévu.