structuredClone para copias profundas
Clone objetos complejos de forma segura.
structuredClone para copias profundas es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
El problema de la copia profunda
Spread y Object.assign crean copias superficiales: los objetos anidados se comparten mediante referencias. Para duplicar por completo una estructura anidada necesita una copia profunda.
structuredClone es la solución integrada.
Por qué spread no es suficiente
Una copia con spread comparte los objetos anidados. Modificar la parte anidada de la copia también afecta al original.
const original = { user: { name: 'Ada' } };
const shallow = { ...original };
shallow.user.name = 'Grace';
console.log(original.user.name);structuredClone al rescate
structuredClone copia recursivamente toda la estructura. Los cambios realizados en el clon nunca afectan al original.
const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);
deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);Objetos anidados independientes
Después de clonar, cada objeto anidado es una referencia distinta, por lo que la comparación de identidad da falso en todos los niveles.
const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);
console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);Clonación de arrays
Los arrays, incluidos los anidados, también se clonan en profundidad. Hacer push en un array anidado del clon no modifica el origen.
const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);
clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);Admite Map y Set
A diferencia de JSON.parse(JSON.stringify(...)), structuredClone admite muchos tipos integrados, incluidos Map, Set y Date.
const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);
clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);Admite referencias circulares
Un objeto que se referencia a sí mismo rompe el truco de JSON, pero se clona correctamente con structuredClone.
const node = { name: 'root' };
node.self = node;
const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);Lo que no puede clonar
structuredClone no puede copiar funciones ni nodos del DOM; lanza un DataCloneError. También elimina las cadenas de prototipos y devuelve objetos simples.
try {
structuredClone({ fn: () => 1 });
} catch (e) {
console.log(e.name);
}Los prototipos no se conservan
Una instancia de una clase clonada se convierte en un objeto simple: los datos se copian, pero los métodos y el prototipo se pierden.
class Point {
constructor(x) { this.x = x; }
show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);
console.log(clone.x);
console.log(clone instanceof Point);structuredClone frente al truco de JSON
El antiguo JSON.parse(JSON.stringify(x)) pierde undefined, convierte las fechas en cadenas y falla con las referencias circulares. structuredClone evita estos problemas con datos serializables.
const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);
console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);Por qué es importante
structuredClone proporciona una copia profunda fiable e integrada para datos simples, y sustituye a las copias frágiles escritas manualmente. Úselo cuando necesite una copia completamente independiente de un estado anidado y recuerde que elimina las funciones y los prototipos.
const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);Comprobación rápida
¿Por qué usar structuredClone en lugar del operador spread para datos anidados?
Repaso: structuredClone
Ha aprendido a realizar copias profundas fiables:
- Spread es superficial;
structuredClonecopia en profundidad. - Admite
Map,Set,Datey referencias circulares. - No puede clonar funciones ni nodos del DOM, y elimina los prototipos.
- Es un sustituto más seguro del truco
JSON.parse(JSON.stringify()).
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 59
- Lecciones
- 200
Preguntas frecuentes
¿La lección «structuredClone para copias profundas» es gratis?
Sí — el texto completo de «structuredClone para copias profundas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «structuredClone para copias profundas»?
Clone objetos complejos de forma segura. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «structuredClone para copias profundas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Object.freeze y seal
- Congelación superficial frente a profunda
- Patrones de actualización inmutable
- structuredClone para copias profundas