Cómo clonar (copiar) objetos y arrays en JavaScript

Clonación de un array

1. Uso del operador spread (...):

const originalArray = [1, 2, 3];
const clonedArray = [...originalArray];
console.log(clonedArray); // Output: [1, 2, 3]

2. Uso de Array.prototype.slice():

const originalArray = [1, 2, 3];
const clonedArray = originalArray.slice();
console.log(clonedArray); // Output: [1, 2, 3]

3. Uso de Array.from():

const originalArray = [1, 2, 3];
const clonedArray = Array.from(originalArray);
console.log(clonedArray); // Output: [1, 2, 3]

4. Uso de structuredClone() (clonación profunda):

const originalArray = [1, { key: "value" }];
const clonedArray = structuredClone(originalArray);
console.log(clonedArray); // Output: [1, { key: "value" }]

Clonación de un objeto

1. Uso del operador spread (...):

const originalObject = { a: 1, b: 2 };
const clonedObject = { ...originalObject };
console.log(clonedObject); // Output: { a: 1, b: 2 }

2. Using Object.assign():

const originalObject = { a: 1, b: 2 };
const clonedObject = Object.assign({}, originalObject);
console.log(clonedObject); // Output: { a: 1, b: 2 }

3. Uso de structuredClone() (clonación profunda):

const originalObject = { a: 1, b: { c: 2 } };
const clonedObject = structuredClone(originalObject);
console.log(clonedObject); // Output: { a: 1, b: { c: 2 } }

4. Uso de JSON.parse() y JSON.stringify() (clonación profunda):

const originalObject = { a: 1, b: { c: 2 } };
const clonedObject = JSON.parse(JSON.stringify(originalObject));
console.log(clonedObject); // Output: { a: 1, b: { c: 2 } }

Este método no admite funciones, undefined, Symbol o referencias circulares.
Clonación profunda vs. clonación superficial

• Clonación superficial (p. ej., utilizando ..., slice() o Object.assign()):
  Solo clona el primer nivel del objeto u array. Los objetos u arrays anidados siguen siendo referencias al original.
• Clonación profunda (p. ej., structuredClone() o JSON.parse(JSON.stringify())):
  Clona toda la estructura, incluidos los arrays u objetos anidados.

Cuándo utilizar cada método

• Utilice la clonación superficial para estructuras simples y planas.
• Utilice la clonación profunda si el objeto u array contienen estructuras anidadas y necesita evitar referencias a los datos originales.

Uso de bibliotecas de terceros

En los proyectos, suelo utilizar Lodash o jQuery. Ambas bibliotecas tienen métodos de clonación profunda. Cuando se utiliza Lodash o jQuery para realizar una clonación profunda, ambas bibliotecas tratan las funciones de forma diferente a los métodos nativos como JSON.parse(JSON.stringify()) o structuredClone().

Clonación profunda con Lodash

Uso de _.cloneDeep() de Lodash:

• Lodash realiza una clonación profunda del objeto o array, incluidas las estructuras anidadas.
• Las funciones (métodos) en el objeto o array se copian por referencia. Esto significa que la función en el objeto clonado o array apuntará a la misma referencia de memoria que el original.

const _ = require('lodash');

const originalObject = {
    value: 42,
    method: function () {
        return this.value;
    }
};

const clonedObject = _.cloneDeep(originalObject);

console.log(clonedObject.method()); // Output: 42
console.log(clonedObject.method === originalObject.method); // Output: true (same reference)

Lodash no elimina funciones, a diferencia de JSON.parse(JSON.stringify()), pero no crea una nueva copia de la función. Conserva una referencia a la original.

Clonación profunda con jQuery

Uso de $.extend() de jQuery:

• Se utiliza $.extend() de jQuery para clonar objetos. Para lograr una clonación profunda, se pasa true como primer argumento.
• Al igual que Lodash, jQuery copia funciones por referencia.

const originalObject = {
    value: 42,
    method: function () {
        return this.value;
    }
};

const clonedObject = $.extend(true, {}, originalObject);

console.log(clonedObject.method()); // Output: 42
console.log(clonedObject.method === originalObject.method); // Output: true (same reference)

Limitaciones de $.extend():

• El mecanismo de clonación de jQuery es más simple y menos robusto en comparación con Lodash.
• No maneja algunos casos de uso avanzados (por ejemplo, referencias circulares) con tanta eficiencia como Lodash.