En JavaScript, los objetos se pasan por referencia, lo que significa que cuando asigna un objeto a una variable, en realidad solo está asignando un puntero al objeto en la memoria. Esto puede ser útil en algunos casos, pero en otros puede causar un comportamiento inesperado, especialmente cuando intenta crear una copia profunda de un objeto. Una copia profunda es una copia del objeto que crea un nuevo objeto con los mismos valores que el original, pero con todos los objetos y matrices anidados también copiados. En este artículo, exploraremos cómo hacer una copia profunda de un objeto en JavaScript.

El primer enfoque ingenuo para copiar un objeto en Javascript es asignarlo a una nueva variable como esa:

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' }

OPERADOR DE DISPERSIÓN

Podemos usar la sintaxis del operador de propagación proporcionada por Javascript usando la siguiente sintaxis:

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

const objCopy = { ...obj };

Cuando usamos el operador de extensión para copiar un objeto o una matriz, terminamos con dos objetos o matrices diferentes. Entonces, si hacemos la misma manipulación que antes así:

objCopy.role = 'Writer';

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

La sintaxis del operador de propagación hará una copia profunda de un objeto de solo un nivel de profundidad. ¿Qué se supone que significa eso ? Digamos que nuestro primer objeto "obj" tiene otra propiedad "contacto" que también es un objeto que contiene el correo electrónico del usuario:

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]' }, }

¿Hay alguna forma de hacer una copia profunda en todos los niveles (objeto anidado) en Javascript ? Bueno, hay una forma, pero a veces se la denomina truco.

JSON.parse y JSON.stringify

Otra forma de hacer una copia profunda de un objeto en JavaScript es usando JSON.parse y JSON.stringify. JSON.stringify convierte un objeto JavaScript en una cadena JSON, mientras que JSON.parse convierte una cadena JSON en un objeto JavaScript. Al usar estas dos funciones juntas, puede crear una copia profunda de un objeto.

Aquí hay un ejemplo de cómo hacer una copia profunda de un objeto usando JSON.parse y JSON.stringify:

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

Conclusión

En conclusión, hacer una copia profunda de un objeto en JavaScript puede ser complicado debido a la forma en que se pasan los objetos por referencia. Sin embargo, al usar el operador de propagación o JSON.parse y JSON.stringify, puede crear una copia profunda de un objeto con todos los objetos anidados y las matrices también copiadas en profundidad. Elija el método que funcione mejor para su caso de uso y asegúrese de probar su código a fondo para asegurarse de que su copia profunda funcione como se espera.