JavaScript
Compara alias, copias superficiales y clonación profunda con spread, Object.assign y structuredClone, incluyendo clases y referencias circulares.
Una copia superficial crea un contenedor exterior nuevo, pero conserva referencias hacia valores anidados. Una copia profunda intenta duplicar también la estructura interna.
const original = {
profile: {
city: "Bogotá",
},
};
const shallowCopy = {
...original,
};original !== shallowCopy; // true
original.profile === shallowCopy.profile; // trueconst alias = original;Esto no crea una copia. alias y original contienen la misma referencia.
alias === original; // trueUna copia superficial sí crea otro objeto exterior.
const copy = {
...original,
};
copy === original; // falseconst copy = {
...source,
};const copy = Object.assign({}, source);const copyWithSpread = [...items];
const copyWithSlice = items.slice();
const copyWithFrom = Array.from(items);Todas estas estrategias copian el contenedor, no los objetos interiores.
const original = {
name: "Nicolás",
skills: ["JavaScript", "TypeScript"],
};
const copy = {
...original,
};Modelo conceptual:
original ──→ objeto A
├─ name: "Nicolás"
└─ skills ──→ array X
copy ─────→ objeto B
├─ name: "Nicolás"
└─ skills ──→ array XLos objetos exteriores son distintos. Ambos apuntan al mismo array.
const copy = {
...original,
profile: {
...original.profile,
},
};Esto duplica original y profile, pero cualquier nivel más profundo continúa compartido si no se copia también.
const original = {
profile: {
address: {
city: "Bogotá",
},
},
};Copiar solo profile no duplica address.
Una copia profunda crea una estructura independiente para los valores clonables que están anidados.
const deepCopy = structuredClone(original);original !== deepCopy;
original.profile !== deepCopy.profile;
original.profile.address !== deepCopy.profile.address;No existe una única operación universal capaz de copiar correctamente cualquier valor imaginable. La estrategia depende del tipo de datos y del significado del objeto.
structuredClone utiliza el algoritmo de clonación estructurada del entorno.
const copy = structuredClone(source);Puede trabajar con muchos valores que JSON no conserva correctamente, como:
Date.Map.Set.ArrayBuffer y typed arrays.RegExp.const original = {
createdAt: new Date(),
tags: new Set(["javascript", "web"]),
};
const copy = structuredClone(original);
copy.createdAt instanceof Date; // true
copy.tags instanceof Set; // trueconst node = {
name: "root",
};
node.self = node;
const copy = structuredClone(node);
copy.self === copy; // trueJSON no puede serializar esta estructura directamente.
structuredClone no clona algunos valores, entre ellos:
structuredClone({
handler() {},
}); // DataCloneErrorUna instancia de una clase contiene más significado que sus propiedades visibles.
class User {
constructor(name) {
this.name = name;
}
greet() {
return `Hello, ${this.name}`;
}
}No debes asumir que una clonación genérica conservará correctamente:
Para objetos de dominio puede ser más correcto definir una operación explícita.
class User {
clone() {
return new User(this.name);
}
}O reconstruir desde datos serializables.
const copy = User.fromJSON(user.toJSON());Las copias comunes no conservan necesariamente:
Si necesitas preservar descriptores de un nivel:
const copy = Object.defineProperties(
Object.create(Object.getPrototypeOf(source)),
Object.getOwnPropertyDescriptors(source),
);Esto sigue siendo superficial respecto a valores anidados.
const copy = JSON.parse(JSON.stringify(source));Puede funcionar para datos JSON simples, pero no es un clonador general.
Problemas frecuentes:
Date se convierte en string.undefined se pierde en objetos.undefined dentro de arrays se convierte en null.NaN e infinitos se convierten en null.Map y Set pierden su estructura.BigInt produce un error.const source = {
createdAt: new Date(),
value: undefined,
};
const copy = JSON.parse(JSON.stringify(source));createdAt será string y value desaparecerá.
Usa JSON cuando realmente quieres serializar datos compatibles con JSON, no solo porque necesitas “una copia profunda”.
const sharedAddress = {
city: "Bogotá",
};
const source = {
billingAddress: sharedAddress,
shippingAddress: sharedAddress,
};Una clonación estructurada conserva la relación interna.
const copy = structuredClone(source);
copy.billingAddress === copy.shippingAddress; // true
copy.billingAddress !== sharedAddress; // trueLa copia tiene su propia dirección, pero ambas propiedades continúan apuntando al mismo clon interno.
Algunos datos binarios pueden transferirse con structuredClone.
const buffer = new ArrayBuffer(1024);
const copy = structuredClone(
{ buffer },
{ transfer: [buffer] },
);Después de transferirse, el buffer original queda separado de su contenido. Esto evita duplicar memoria, pero cambia el objeto de origen y debe utilizarse de forma intencional.
A menudo no necesitas copiar todo.
function createOrderSnapshot(order) {
return {
id: order.id,
status: order.status,
total: order.total,
customer: {
id: order.customer.id,
name: order.customer.name,
},
};
}Una copia específica:
Una copia profunda debe recorrer una estructura y crear nuevos valores. Puede ser costosa para objetos grandes.
Antes de clonar, pregunta:
Para actualizaciones de estado suele ser mejor copiar únicamente el camino modificado que clonar toda la estructura.
function createEditableDraft(product) {
return structuredClone({
id: product.id,
name: product.name,
variants: product.variants,
metadata: product.metadata,
});
}Esto puede ser apropiado si los datos son clonables y el formulario necesita un borrador totalmente independiente.
Si el producto contiene instancias, funciones o recursos especiales, conviene construir el draft explícitamente.
Object.assign son superficiales.structuredClone soporta muchos tipos y referencias circulares.¿Qué comparaciones son verdaderas?
const original = {
profile: {
city: "Bogotá",
},
};
const shallow = { ...original };
const deep = structuredClone(original);original !== shallow es true; original.profile === shallow.profile es true; original !== deep es true; original.profile !== deep.profile es true.
this explica cómo una función tradicional recibe su receptor según la forma en que se invoca.