What is the most efficient way to deep clone an object in JavaScript?

 

1. Native Deep Cloning with structuredClone

The most efficient and now widely supported way to deep clone an object is by using the native structuredClone() function. This method works in all major browsers and Node.js (version 17 and above).

const original = { a: 1, b: { c: 2 } };
const clone = structuredClone(original);

console.log(clone); // { a: 1, b: { c: 2 } }

Pros:

• Handles circular references and complex types like Date, Map, Set, and more.
• Efficient and native to JavaScript.

Cons:

• Does not clone functions, DOM nodes, and certain metadata like property descriptors.

2. Using JSON Serialization (JSON.parse(JSON.stringify())

One of the most commonly used methods is serializing the object into a JSON string and then parsing it back into an object.

const original = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(original));

console.log(clone); // { a: 1, b: { c: 2 } }

Pros:

• Simple and works with plain objects.

Cons:

• Fails to clone functions, Date, undefined, Infinity, NaN, RegExp, Map, Set, and objects with circular references.
• Loses prototype chain and methods.

3. Using Libraries

For more complex scenarios or legacy browser support, using a dedicated library is often a good solution. Some popular libraries include:

• Lodash (_.cloneDeep): A highly reliable solution for deep cloning.

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const clone = _.cloneDeep(original);

console.log(clone); // { a: 1, b: { c: 2 } }

• Ramda (R.clone): Another library that provides a deep cloning function.

const R = require('ramda');
const original = { a: 1, b: { c: 2 } };
const clone = R.clone(original);

console.log(clone); // { a: 1, b: { c: 2 } }

Pros:

• Handles most complex types like Date, RegExp, and circular references.
• Battle-tested and widely used in production environments.

Cons:

• Requires importing an external library, which adds to the bundle size.

4. Manual Deep Cloning

In performance-critical scenarios, especially when the object structure is known, manually copying object properties is the fastest approach. This avoids loops and external dependencies, and it is highly optimized for performance:

const original = { a: 1, b: { c: 2 } };
const clone = { a: original.a, b: { c: original.b.c } };

console.log(clone); // { a: 1, b: { c: 2 } }

Pros:

• Extremely fast for known object structures.
• No external dependencies.

Cons:

• Not scalable for unknown or dynamic object structures.
• Does not handle complex types or circular references.

Conclusion

• Best for simplicity: Use JSON.parse(JSON.stringify()) if you’re working with simple data types and want a one-liner.
• Best for modern projects: Use the native structuredClone() if you need a reliable and efficient deep clone solution with support for complex data types.
• Best for flexibility: Use a library like lodash for complete and reliable cloning, especially when working with varied data structures.