Clonar un objeto sin referencia en JavaScript

Muchas veces, en JavaScript, necesitamos copiar los valores de un objeto en otro objeto. En algunos casos, esto puede ser fácil, pero cuando se trata de objetos complejos con muchas propiedades, el proceso de copiado puede llegar a ser difícil y confuso. Copiar objetos por referencia significa modificar ambos objetos cuando se cambia uno de ellos. Para evitar esto, necesitamos copiar un objeto sin referencia.

En este artículo, aprenderemos cómo clonar un objeto en JavaScript sin hacer referencia al objeto original.

📋 Aquí podrás encontrar✍

¿Qué significa clonar un objeto?
Técnicas de clonación de objetos en JavaScript
Ejemplos de código:
Conclusión
Preguntas frecuentes

¿Qué significa clonar un objeto?

Clonar un objeto significa crear una copia de ese objeto. La copia debe tener los mismos valores que el objeto original, pero no debe compartir la misma referencia de memoria.

Técnicas de clonación de objetos en JavaScript

1. Método de asignación:

Este método implica simplemente asignar el objeto a una nueva variable, lo que crea una copia de referencia. Este es el método más fácil y rápido de clonar un objeto, pero como ya hemos señalado, compartirá la misma referencia de memoria que el objeto original.

2. JSON:

Este es un método rápido y confiable para clonar un objeto sin referencia. En el proceso de clonación, transformamos el objeto en una cadena JSON y, a través de la cadena, creamos una copia del objeto. Esto se logra con las siguientes líneas de código:


let objetoOriginal = {propiedad1: "valor1", propiedad2: "valor2"};

let objetoClon = JSON.parse(JSON.stringify(objetoOriginal));

Sin embargo, debes tener en cuenta que este método no funciona en casos en los que el objeto a clonar contiene datos que no se pueden convertir en JSON, como Funciones o Expresiones Regulares.

3. Spread Operator:

Este método también conocido como "clonación superficial", copia todas las propiedades de primer nivel de un objeto a otro y, en el proceso, crea una nueva referencia del objeto. Sin embargo, si el objeto original contiene objetos anidados, esas referencias aún se compartirán en ambas copias. En otras palabras, las propiedades anidadas no se clonarán.


let objetoOriginal = {propiedad1: "valor1", propiedad2: "valor2"};

let objetoClon = {...objetoOriginal};

4. Object.assign:

Este método permite fusionar dos o más objetos y crear una copia del objeto fusionado. La copia creada a través de Object.assign no compartirá la misma referencia de memoria que el objeto original, lo que significa que cualquier cambio en la copia no afectará el objeto original. Este método no clona las propiedades anidadas.


let objetoOriginal = {propiedad1: "valor1", propiedad2: "valor2"};
let objeto2 = {propiedad3: "valor3"};

let objetoClon = Object.assign({}, objetoOriginal, objeto2);

Ejemplos de código:

En el siguiente ejemplo, vamos a clonar el siguiente objeto sin referencia:


let objetoOriginal = {
  propiedad1: "valor1",
  propiedad2: "valor2",
  propiedad3: {
    propiedad4: "valor4"
  }
};

1. Método de asignación:


let objetoClonado = objetoOriginal;

2. JSON:


let objetoClonado = JSON.parse(JSON.stringify(objetoOriginal));

3. Spread Operator:


let objetoClonado = {...objetoOriginal};

4. Object.assign:


let objetoClonado = Object.assign({}, objetoOriginal);

Conclusión

Clonar un objeto sin referencia en JavaScript es importante para evitar modificar accidentalmente el objeto original cuando trabajamos con una copia. Existen varios métodos para clonar objetos en JavaScript, pero cada uno tiene sus ventajas y limitaciones. Al elegir un método, es importante tener en cuenta los requisitos de su proyecto y los pros y contras de cada técnica.

Preguntas frecuentes

¿Por qué no puedo simplemente copiar un objeto con una asignación?

La asignación de objeto crea una copia de referencia, por lo que cualquier cambio en la copia afectará al objeto original.

¿Qué es un objeto anidado?

Un objeto anidado es un objeto que es una propiedad dentro de otro objeto. Por ejemplo, la propiedad3 en nuestro objetoOriginal es un objeto anidado.

¿Puedo clonar objetos anidados utilizando los métodos mencionados anteriormente?

Spread operator y Object.assign clonarán las propiedades anidadas de primer nivel, pero las propiedades anidadas más profundas aún compartirán la misma referencia de memoria. JSON.stringify y luego JSON.parse clonarán todos los objetos, pero es importante tener en cuenta las limitaciones mencionadas en la sección correspondiente.