Deep Cloning Objects in JavaScript: Methods, Trade-offs, and Best Practices

By the end of this page, you will understand what deep cloning means in JavaScript, why it is different from simple assignment or shallow copying, and which cloning techniques are appropriate in modern code. You will also learn the strengths and limitations of structuredClone(), JSON.parse(JSON.stringify(...)), and manual recursive cloning.

Deep cloning means creating a completely independent copy of a value, including all nested objects and arrays.

In JavaScript, objects are assigned and passed by reference. That means this code does not create a new independent object:

const original = { user: { name: "Ava" } };
const copy = original;

copy.user.name = "Leo";
console.log(original.user.name); // "Leo"

Both variables point to the same object in memory.

A shallow copy creates a new top-level object, but nested values are still shared:

const original = { user: { name: "Ava" } };
const copy = { ...original };

copy.user.name = "Leo";
console.log(original.user.name); // "Leo"

A deep clone copies nested structures too:

const original = { : { :  } };
 copy = (original);

copy.. = ;
.(original..); 

Think of an object as a folder that contains files and subfolders.

• Assignment is like writing down a second shortcut to the same folder.
• Shallow copy is like making a new top-level folder but keeping shortcuts to the same subfolders inside.
• Deep clone is like copying the entire folder tree so every subfolder and file is duplicated.

If you change a file in a true deep clone, the original folder stays unchanged.

That is why deep cloning is useful when you need a safe, isolated copy of nested data.

Core syntax

Modern built-in approach: structuredClone()

const clone = structuredClone(original);

This is the preferred modern solution for many data structures.

JSON-based approach

const clone = JSON.parse(JSON.stringify(original));

This works only for JSON-safe data.

Example: nested object

const original = {
  name: "Laptop",
  specs: {
    ram: 16,
    storage: 512
  }
};

const clone = structuredClone(original);
clone.specs.ram = 32;

console.log(original.specs.ram); // 16
console.log(clone..);    

Traceable example

const original = {
  profile: {
    name: "Mia",
    skills: ["JavaScript", "CSS"]
  }
};

const clone = structuredClone(original);
clone.profile.name = "Noah";
clone.profile.skills.push("HTML");

console.log(original);
console.log(clone);

Step by step

1. Create original

const original = {
  profile: {
    name: "Mia",
    skills: ["JavaScript", "CSS"]
  }
};

Memory idea:

• original points to one object.
• Inside it, profile points to another object.
• skills points to an array.

Common practical uses

State updates in applications

When working with nested state, you may need a safe copy before modifying data.

const draftState = structuredClone(appState);
draftState.user.settings.theme = "dark";

Copying API data before transformation

You may want to preserve the original server response.

const rawResponse = await fetchData();
const workingCopy = structuredClone(rawResponse);

Undo/redo features

Editors and drawing tools often store snapshots.

history.push(structuredClone(currentDocument));

Test isolation

In tests, cloning fixture data prevents one test from affecting another.

const input = structuredClone(sampleUserData);

Worker communication

The structured clone algorithm is also used when passing data between threads such as Web Workers.

In real projects, developers often avoid deep cloning unless they actually need it, because cloning large objects has a cost.

Common patterns

1. Clone only the part you need

Instead of cloning a whole object tree, copy only the branch being changed.

const updatedUser = {
  ...user,
  settings: {
    ...user.settings,
    theme: "dark"
  }
};

This is often more efficient than deep cloning everything.

2. Use deep cloning at system boundaries

Deep cloning is common when:

• reading external input
• creating immutable snapshots
• sanitizing data before mutation
• preparing messages for workers

3. Guard against unsupported data

If a value may contain functions or DOM elements, developers often validate before cloning.

function safeClone(value) {
  try {
    return structuredClone(value);
  } catch {
    return null;
  }
}

4. Prefer data modeling over constant cloning

In larger codebases, repeated deep cloning may signal a design issue. Teams often restructure data flow so fewer full copies are needed.

5. Use libraries carefully

1. Confusing assignment with copying

const a = { x: 1 };
const b = a;
b.x = 99;

console.log(a.x); // 99

Why it happens

b is just another reference to the same object.

How to avoid it

Use a copy strategy when you need independence.

2. Assuming spread syntax is a deep clone

const a = { nested: { x: 1 } };
const b = { ...a };

b.nested.x = 99;
console.log(a.nested.x); // 99

Why it happens

Spread copies only the top level.

3. Using JSON cloning for unsupported values

const a = {
  :  (),
  : ,
  :  
};

 b = .(.(a));
.(b);

Deep clone method comparison

Quick reference

Assignment

const copy = original;

• Not a copy
• Same reference

Shallow copy

const copy = { ...original };
const copy2 = Object.assign({}, original);

• Copies only the top level
• Nested objects are still shared

Deep clone with modern JavaScript

const copy = structuredClone(original);

• Best built-in option for many cases
• Handles nested objects, arrays, Date, Map, Set, and circular references
• Does not clone functions or some special objects

Deep clone with JSON

const copy = JSON.parse(JSON.stringify(original));

What is the difference between deep clone and shallow copy in JavaScript?

A shallow copy duplicates only the first level. Nested objects and arrays are still shared. A deep clone creates independent copies of nested values too.

Is structuredClone() the best way to deep clone in JavaScript?

For modern JavaScript and cloneable data, yes. It is the best built-in general-purpose option in most cases.

Why is JSON.parse(JSON.stringify(obj)) not always safe?

Because it only works for JSON-compatible data. It removes undefined and functions, converts Date objects to strings, and fails on circular references.

Can structuredClone() clone functions?

No. Functions are not supported by the structured clone algorithm.

Does spread syntax create a deep clone?

No. Spread syntax creates only a shallow copy.

Is deep cloning always a good idea?

No. It can be slower and use more memory for large objects. Often it is better to copy only the parts you need to change.

Can circular references be deep cloned?

Yes, with structuredClone(). No, with JSON cloning.

Should I use eval(uneval(obj)) for cloning?

No. It is non-standard, unsafe in many contexts, and not recommended for modern JavaScript.

• Object references — Deep cloning only makes sense once you understand that objects are referenced, not copied automatically.
• Shallow copy — Important for comparing spread syntax and Object.assign() with deep cloning.
• Immutability — Many state management patterns rely on creating safe copies instead of mutating original data.
• Spread syntax — Commonly used for shallow updates in objects and arrays.
• JSON serialization — Helps explain why JSON cloning works for some values and fails for others.
• Recursion — Manual deep clone functions often rely on recursive traversal.
• Maps and Sets — Useful to know because structuredClone() supports them better than JSON cloning.
• Circular references — A major edge case that breaks naive cloning approaches.