Shallow vs Deep Copy of Objects

A shallow copy duplicates the top level of the object only. Every value inside is copied by reference, so nested objects are still shared between the original and the copy. A deep copy duplicates everything all the way down, so the two structures are completely independent.

const original = {
  name: "Ada",
  tags: ["a", "b"],
  nested: { count: 1 },
};

// A shallow copy.
const shallow = { ...original };
shallow.nested.count = 99;
console.log(original.nested.count);   // 99 - the inner object is shared
console.log(original.tags.length);    // 2

// A deep copy.
const deep = structuredClone(original);
deep.nested.count = 0;
deep.tags.push("c");
console.log(original.nested.count);   // 99 - untouched
console.log(original.tags.length);    // 2 - untouched

The shallow copy is the dangerous one because it looks like it worked. Adding or removing a top-level property on the copy leaves the original alone, so a quick test passes. The moment you reach one level deeper and mutate a nested object or array, both versions change together, and the bug appears far away from the assignment that caused it.

There are three ways to make a shallow copy. The spread operator in an object literal, the Object.assign method, and the structuredClone function with a shallow depth. They behave the same for plain data, and the spread syntax is the one to prefer because it also copies symbol-keyed properties in the same way the others do and reads more clearly.

Deep copies are more expensive and more limited. structuredClone handles plain objects, arrays, dates, maps, sets, typed arrays and circular references, but it cannot clone functions, it cannot clone class instances into plain objects with their methods intact, and it throws on a value carrying a function. For those cases you need a library such as the lodash cloneDeep function, or a hand-written recursive copy.

Only when you are about to mutate nested state that you do not own. If the data came from a prop, a store, an API response or a shared module, and you are going to change something inside it, then you need an independent copy. If you are only reading it, copying is pure waste.

There is a better answer for most of those cases, and it is to update immutably instead. Instead of cloning the whole structure and mutating the clone, build a new object along the path that changed and reuse the references everywhere else. Spreading the parent and replacing the one changed child gives you a new top-level object with new identity, without copying the branches that did not change. That keeps referential equality meaningful, which matters for memoisation and for React rendering.

The deep copy is still the right tool in a few situations. You are handing data to a library that will mutate it in place and you cannot control it. You are taking a snapshot of something that will keep changing and you need a stable version for later comparison. Or you are writing tests that need a fully independent fixture for every case.

Two cautions. Deep copying is not free, and doing it inside a render or a hot loop is a common performance bug. And structuredClone cannot handle functions, so a deep copy of an object that contains a callback will throw. When that happens, copy the plain parts manually and carry the functions across by reference.

The built-in structuredClone function is the right answer. It is available in current browsers and in Node, it copies plain objects, arrays, dates, maps, sets, typed arrays and regular expressions, and it handles circular references without looping forever.

const source = {
  id: 1,
  created: new Date("2026-01-01T00:00:00Z"),
  meta: { tags: ["a"], nested: { deep: true } },
  missing: null,
};

const deep = structuredClone(source);

console.log(deep.created instanceof Date);              // true - dates survive
console.log(deep.meta !== source.meta);                   // true - new object
console.log(deep.meta.nested !== source.meta.nested);     // true - nested too
console.log(deep.missing);                                // null

// The old JSON round trip loses types.
const viaJson = JSON.parse(JSON.stringify(source));
console.log(viaJson.created instanceof Date);   // false - it is a string now
console.log(viaJson.missing);                   // undefined - null was dropped

Comparing the two approaches shows what the JSON trick costs you. A date becomes a string, so the clone no longer behaves like a date. A null value survives in structuredClone but disappears in the JSON round trip, because JSON has no way to represent it distinctly from a missing key. Functions are dropped by JSON and make structuredClone throw, because a function cannot be cloned.

Two more things structuredClone does that are worth knowing. It can transfer instead of copy, which moves the data rather than duplicating it, and that is considerably faster for large buffers because nothing is duplicated. And it rejects a Proxy, so if you are working with proxied objects you will need another approach.

For class instances with methods, structuredClone gives you a plain object without the prototype, so the methods are gone. If that matters, either rebuild the instance explicitly or use a library that understands your class shapes.