Clonación de objetos en JavaScript: cómo no romper el código

Introducción: ¿por qué la simple asignación es una trampa?

Imagina que estás escribiendo una aplicación de notas. El usuario crea una tarjeta con un título y un texto, luego quiere hacer una copia para modificarla un poco. Escribes:

const original = { title: 'Mi plan', text: 'Comprar leche' };\nconst copy = original;\ncopy.title = 'Nuevo plan';\nconsole.log(original.title); // 'Nuevo plan' — ¡uy!

¿Te resulta familiar? Si es así, te has topado con la característica principal de los objetos en JavaScript: se pasan por referencia. La asignación copy = original no crea un nuevo objeto, solo copia la referencia a la misma ubicación de memoria. Cualquier cambio en copy se refleja en original.

En Stack Overflow, la pregunta "How do I correctly clone a JavaScript object?" ha acumulado miles de visitas y decenas de respuestas. Es uno de los problemas más comunes tanto para principiantes como para desarrolladores experimentados. En este artículo, analizaremos todas las formas de clonación de objetos en JavaScript, desde las simples hasta las avanzadas, y descubriremos qué enfoque es mejor en cada situación.

Copia superficial (Shallow copy): rápida y sencilla

La copia superficial crea un nuevo objeto, pero para objetos anidados (arrays, otros objetos) solo copia las referencias. Es ideal para estructuras planas, pero peligrosa para las profundas.

Método 1: Operador spread (…)

La forma más moderna y legible:

const original = { name: 'Ana', age: 25 };\nconst clone = { ...original };\nclone.age = 30;\nconsole.log(original.age); // 25 — ¡todo bien!

Ventajas: escritura corta, funciona con arrays y objetos. Desventajas: no copia métodos (funciones) ni propiedades de tipo Symbol.

Método 2: Object.assign()

Método clásico para copiar un objeto sin referencias en el nivel superior:

const source = { a: 1, b: { c: 2 } };\nconst target = Object.assign({}, source);\ntarget.a = 100; // source.a no cambiará\ntarget.b.c = 999; // source.b.c también cambiará — ¡shallow!

Este método es especialmente útil cuando necesitas combinar varios objetos: Object.assign({}, obj1, obj2).

Método 3: Bucle for…in

Una forma antigua pero aún funcional. Útil para entender la mecánica:

function shallowClone(obj) {\n  const clone = {};\n  for (let key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      clone[key] = obj[key];\n    }\n  }\n  return clone;\n}

Hoy en día se usa raramente, pero demuestra perfectamente cómo funciona la clonación manual de objetos.

Copia profunda (Deep copy): cuando lo necesitas todo

Si tu objeto contiene objetos anidados, arrays o fechas, la shallow copy te fallará. Necesitas una clonación profunda js.

Método 4: JSON.parse + JSON.stringify

El "parche" más popular:

const original = { \n  name: 'Pedro', \n  address: { city: 'Moscú', street: 'Tverskaya' },\n  date: new Date()\n};\nconst clone = JSON.parse(JSON.stringify(original));\nclone.address.city = 'SPb';\nconsole.log(original.address.city); // 'Moscú' — ¡bien!

Pero tiene matices: este método pierde funciones, undefined, Symbol, y Date se convierte en una cadena. Para datos simples está bien, para datos complejos no.

Método 5: structuredClone() — el nuevo estándar

Desde 2022, JavaScript tiene un método incorporado llamado structuredClone:

const original = { \n  scores: [10, 20, 30], \n  meta: { level: 'easy' },\n  date: new Date()\n};\nconst clone = structuredClone(original);\nclone.meta.level = 'hard';\nconsole.log(original.meta.level); // 'easy'

Ventajas: soporta Date, Map, Set, ArrayBuffer, referencias recursivas. Desventajas: no soporta funciones, elementos DOM, Error. Funciona