How to Deep Clone Object in JavaScript: Simple Guide

To deep clone an object in JavaScript, you can use structuredClone(object) for a modern, reliable method or JSON.parse(JSON.stringify(object)) for simple cases. These methods create a new object with all nested objects copied, avoiding shared references.

Syntax

The common ways to deep clone an object are:

• structuredClone(object): A built-in function that creates a deep copy of the object, including nested objects and arrays.
• JSON.parse(JSON.stringify(object)): Converts the object to a JSON string and back to an object, creating a deep copy but with limitations.

Use structuredClone for best results in modern environments.

javascript

const clone1 = structuredClone(originalObject);
const clone2 = JSON.parse(JSON.stringify(originalObject));

Example

This example shows how to deep clone an object with nested properties using both methods and verifies that changes to the clone do not affect the original.

javascript

const original = {
  name: "Alice",
  details: {
    age: 25,
    hobbies: ["reading", "hiking"]
  }
};

// Using structuredClone (modern and recommended)
const cloneStructured = structuredClone(original);
cloneStructured.details.age = 30;

// Using JSON methods (older approach)
const cloneJSON = JSON.parse(JSON.stringify(original));
cloneJSON.details.hobbies.push("coding");

console.log("Original:", original);
console.log("Clone with structuredClone:", cloneStructured);
console.log("Clone with JSON methods:", cloneJSON);

Output

Original: { name: 'Alice', details: { age: 25, hobbies: [ 'reading', 'hiking' ] } }
Clone with structuredClone: { name: 'Alice', details: { age: 30, hobbies: [ 'reading', 'hiking' ] } }
Clone with JSON methods: { name: 'Alice', details: { age: 25, hobbies: [ 'reading', 'hiking', 'coding' ] } }

Common Pitfalls

Using JSON.parse(JSON.stringify(object)) has limitations:

• It cannot clone functions, undefined, Symbol, or special objects like Date, Map, Set.
• It loses object prototypes and methods.
• It throws errors on circular references.

structuredClone handles these cases better but is not supported in very old browsers.

javascript

const obj = {
  date: new Date(),
  func: () => "hello",
  nested: { a: 1 }
};

// JSON method loses function and date
const cloneJson = JSON.parse(JSON.stringify(obj));
console.log(cloneJson.date); // Outputs string, not Date object
console.log(cloneJson.func); // undefined

// structuredClone preserves types
const cloneStructured = structuredClone(obj);
console.log(cloneStructured.date instanceof Date); // true
console.log(typeof cloneStructured.func); // function

Output

2023-... (string representation of date)
undefined
true
function

Quick Reference

Summary tips for deep cloning objects in JavaScript:

• Use structuredClone(object) for accurate deep cloning including special types and circular references.
• Use JSON.parse(JSON.stringify(object)) only for simple objects without functions, dates, or circular references.
• For complex cloning needs, consider libraries like lodash.cloneDeep.

Key Takeaways

Use structuredClone for reliable deep cloning of most objects including nested and special types.

JSON methods work only for simple objects without functions, dates, or circular references.

Deep cloning creates a new object with no shared references to the original.

Beware that JSON cloning loses functions, prototypes, and special object types.

For complex cases, consider specialized libraries like lodash's cloneDeep.