Teoría: Clonación

Cuando trabajamos con objetos en JavaScript, en muchas ocasiones necesitamos crear copias de ellos. La clonación nos permite generar un nuevo objeto que contenga los mismos datos pero que sea independiente del original.

En este tema veremos cómo hacer copias de objetos en JavaScript usando métodos nativos y herramientas externas como lodash. También exploraremos las diferencias entre la clonación superficial y la clonación profunda.

Clonación superficial

La forma más sencilla de clonar un objeto en JavaScript es usando Object.assign(). Veamos un ejemplo:

const user = { name: 'Miguel', email: 'support@codica.io', age: 44 };

// Se crea una copia del objeto original
const copiaDeUsuario = Object.assign({}, user);

console.log(user === copiaDeUsuario); // false

Aquí, Object.assign() toma un objeto vacío {} como base y copia las propiedades de user en él. Como resultado, copiaDeUsuario tiene los mismos datos, pero es un objeto distinto. Eso significa que cualquier modificación en uno no afecta al otro.

Usando lodash

Otra forma de hacer esto es utilizando la función clone() de la biblioteca lodash:

import _ from 'lodash';

const user = { name: 'Miguel', email: 'support@codica.io', age: 44 };
const copiaDeUsuario = _.clone(user);

El resultado es el mismo, pero el uso de _.clone() hace que el código sea más claro al expresar exactamente lo que queremos hacer.

Limitación: referencias a objetos anidados

La clonación superficial no copia objetos dentro del objeto original, sino que mantiene referencias a ellos:

const user = { company: { name: 'Códica' } };
const copiaDeUsuario = Object.assign({}, user);

console.log(user.company === copiaDeUsuario.company); // true

user.company.createdAt = 2012;
console.log(copiaDeUsuario.company.createdAt); // 2012

En este caso, la propiedad company dentro de copiaDeUsuario sigue siendo la misma referencia que en el objeto original. Si modificamos user.company, los cambios también afectarán a copiaDeUsuario.company.

Clonación profunda

Si necesitamos copiar un objeto incluyendo todas sus estructuras internas sin compartir referencias, usamos la clonación profunda. Para esto, JavaScript incorpora el método structuredClone():

const user = { company: { name: 'Códica' } };
const copiaDeUsuario = structuredClone(user);

console.log(user.company === copiaDeUsuario.company); // false

Aquí sí logramos que copiaDeUsuario.company sea un nuevo objeto independiente.

También podemos hacer una clonación profunda con lodash usando cloneDeep():

const copiaDeUsuario = _.cloneDeep(user);

Consideraciones sobre el rendimiento

Por eso, en la práctica, se suele favorecer la clonación superficial siempre que sea posible y solo recurrir a la clonación profunda cuando realmente sea necesario.