Shallow state updates
You need a new top-level object while intentionally sharing nested state.
JS Puzzles · Const
Deep vs Shallow Copy
A shallow copy creates a new outer object but keeps references to nested objects. A deep copy recursively duplicates nested properties; structuredClone is the documented built-in for this purpose.
How it works
JavaScript object assignment and ordinary copy operations preserve references to nested objects. A shallow copy creates a new outer object but shares nested objects; structuredClone creates a separate copy including nested properties, so later nested mutations do not cross between the values.
Syntax
structuredClone(value)Key points
- Objects are reference-based, whereas primitive values are copied independently.
- An object variable stores a reference to the object rather than the object data itself.
- Copying nested objects recursively is deep cloning, also called structured cloning.
- Use structuredClone when an independent copy of nested, supported data is required.
- Shallow copies isolate the top-level container but preserve references inside it.
Common mistakes
- Assigning an object variable to another variable does not clone the object; both variables refer to the same object.
- Object.assign and spread syntax copy only the outer level, so nested objects remain shared.
- structuredClone is the documented deep-copy option, but it supports only cloneable values.
Example: Shallow versus deep copy
const original = { user: { name: "Ada" }, tags: ["js"] };
const shallow = { ...original };
const deep = structuredClone(original);
shallow.user.name = "Grace";
deep.tags.push("copy");
console.log(original.user.name); // "Grace": nested object is shared
console.log(original.tags); // ["js"]: deep copy is independentThe spread copy duplicates only the outer object, while structuredClone recursively copies supported nested values.
When to use it
Deeply isolated data
You need independently mutable nested configuration or application state.
Safe data handoff
You need to pass cloneable structured data across boundaries without sharing nested references.
Interview questions
QWhat is the difference between assigning an object and making a shallow copy?
Object variables hold references, so assignment copies the reference rather than duplicating the object. A shallow copy creates a new outer object while nested objects remain shared.
Follow-up: What happens if a nested property is mutated through the shallow copy? The original changes too because both copies reference that nested object.
QHow does structuredClone provide a deep copy?
structuredClone recursively clones the object and its nested properties. The resulting object can be changed without changing the original, provided its contents are supported by the structured-cloning algorithm.
Follow-up: Why is JSON serialization not a general replacement? It is limited to JSON-representable data and can lose or transform values outside that format.
QWhen is a shallow copy sufficient?
Primitive values are copied as values, but object values are references. Therefore, a shallow copy is independent only for properties whose values are primitives.
Follow-up: How can you test whether nested state is shared? Compare the nested references with strict equality, such as copy.child === original.child.
Related
Object.assignstructuredCloneobject referencesprimitivesshallow copydeep cloning