How to properly do deep clone and deep compare with JavaScript variables

Published on 31/03/2025

Introduction

Object cloning and deep comparison in JavaScript is an important topic because they are commonly used, while the developers oftentimes do this incorrectly (and even giving advises to inexperienced developers!) which can even lead to nasty and hard to debug bugs. So knowing how to properly clone and deeply compare is a thing that every JS developer must know.

Object cloning

Let's start with the object cloning since it's a more common problem.

What's wrong with JSON.stringify() / JSON.parse() approach?

The most common problem I see is that people oftentimes clone objects by converting it into JSON and parsing it back. This works most of the time and might be even appropriate in certain trivial situations. However, people oftentimes don't think about the potential problems of this approach.

This is where things can go wrong when doing JSON.stringify() / JSON.parse():

JSON.stringify() doesn't support some values, such as NaN or undefined. They can be skipped or converted into null. For some data types, such as bigint, it will even throw exception.
JSON.stringify() cannot work with objects that contain cyclic references: const obj = {}; obj.selfReference = obj; console.log(JSON.stringify(obj)); // exception
Although usually not as serious as the first 2, but I must say it's not efficient for larger objects. It's slow and wastes a lot of memory.

The better approach with structuredClone()

Nowadays object cloning mostly become a much easier problem especially with the introduction of structuredClone(). All mainstream browsers have supported structuredClone() from 2022. structuredClone() is useful and very efficient for regular objects and most primitive datas. It automatically handles self referencing structures a well.

const obj = {};
obj.selReference = obj;
const clonedObj = structuredClone(obj);
console.log(obj === clonedObj); // false, because it's a cloned object with a different memory address
console.log(clonedObj.selReference === clonedObj); // true, because it has the same structure as obj (isomorphic to obj, i.e. as a graph)

That being said, structuredClone() has some limitations when you want to clone not so regular data structures:

It can't copy functions or DOM nodes. Will throw DataCloneError if encounters such thing.
The object prototype (__proto__) will be replaced with the standard Object prototype.
Object private fields are not cloned.
Setters are lost and getters are converted to regular properties.
Other smaller things listed here,

Custom cloning

It's recommended to use structuredClone() as much as possible because it has built-in support for most data structures, including Set and Map. However beyond regular data structures (for example, for the already mentioned functions) structuredClone() will not work, and I would even say rightfully, because there is no universally correct way to do that.

But let's say, you want to support custom class objects (with no private properties) and DOM nodes while avoiding structuredClone() errors.

It can be done like this:

function customClone(obj) {
	const clonedObjects = new WeakMap();
	
	function cloneRecursively(obj) {
		// return if it's a non object type
		if (typeof obj !== 'object' || obj === null) {
			return obj;
		}
		
		let clonedObject = clonedObjects.get(obj);

		if (clonedObject) {
			// return the associated cloned object if exists to ensure that the structure is isomorphic to the original object and avoid infinite recursion
			return clonedObject;
		}
				
		if (ArrayBuffer.isView(obj) || obj instanceof RegExp) {
			// structuredClone() can handle these types
			clonedObject = structuredClone(obj);
		} else if (Array.isArray(obj)) {
			clonedObject = [];
		} else if (obj instanceof Map) {
			clonedObject = new Map();
		} else if (obj instanceof Set) {
			clonedObject = new Set();
		} else if (obj instanceof Node) {
			clonedObject = obj.cloneNode(true);
		} else {
			clonedObject = {};
		}
		
		//  we need to associate the clonedObject with obj before filling clonedObject to ensure that no infinite recursion will occur if obj is encountered again somewhere deeper
		clonedObjects.set(obj, clonedObject);
	
		if (Array.isArray(obj)) {
			for (const x of obj) {
				clonedObject.push(cloneRecursively(x));
			}
		} else if (obj instanceof Map) {
			for (const x of obj) {
				clonedObject.set(cloneRecursively(x[0]), cloneRecursively(x[1]));
			}
		} else if (obj instanceof Set) {
			for (const x of obj) {
				clonedObject.add(cloneRecursively(x));
			}
		} else if (!(obj instanceof Node || ArrayBuffer.isView(obj) || obj instanceof RegExp)) {
			clonedObject.__proto__ = obj.__proto__;
			const descriptors = Object.getOwnPropertyDescriptors(obj);
			
			for (const key in descriptors) {
				Object.defineProperty(clonedObject, key, {
					...descriptors[key],
					value: cloneRecursively(descriptors[key].value)
				})
			}
		}
		
		return clonedObject;
	}
	
	return cloneRecursively(obj);
}

This won't work ideally for any type (for example some native classes like WeakMap will become corrupted), but it's good enough for adding support for class objects and DOM nodes. There are some libraries that also support deep clone, such as Lodash. But as I stated, there is not perfect clone function.

Deep compare

Okay, we've sorted out deep copying. Now what about deep comparison? It's also an important thing, although slightly less commonly used. Unlike deep cloning, there is no built-in function for that. There are only libraries, like the already mentioned Lodash. As with deep cloning, there is absolutely no 100% right way to do that. Some variations might work well for specific cases. We'll try to implement a generic one that also checks if the compared objects are isomorphic (have the same structure as a graph).

This is how it will probably look like:

function customCompare(objA, objB) {
	const matchingObjects = new WeakMap();

	function compareRecursively(objA, objB) {
		if (typeof objA !== typeof objB) {
			return false;
		}

		if (typeof objA !== 'object' || objB === null) {
			return objA === objB || (typeof objA === 'number' && isNaN(objA) && isNaN(objB));
		}

		const matchingObj = matchingObjects.get(objA);

		if (matchingObj) {
			// if objA matches with objB, objA should always match with objB
			return objB === matchingObj;
		}

		//  we need to associate objA with objB before checking deeper to ensure that no infinite recursion will occur in the case objA reoccurence when checking deeper
		matchingObjects.set(objA, objB);

		if (objA.__proto__ !== objB.__proto__) {
			return false;
		} else if (objA instanceof RegExp) {
			return objA.toString() === objB.toString();
		} else if (objA instanceof HTMLElement) {
			return objA.outerHTML === objB.outerHTML;
		} else if (objA instanceof Node) {
			return objA.textContent === objB.textContent;
		} else if (Array.isArray(objA)) {
			if (objA.length !== objB.length) {
				return false;
			}

			for (let i = 0; i < objA.length; ++i) {
				if (!compareRecursively(objA[i], objB[i])) {
					return false;
				}
			}
		} else if (objA instanceof Set) {
			if (objA.size !== objB.size) {
				return false;
			}

			const keysA = objA.keys();
			const keysB = objB.keys();

			while (true) {
				const resA = keysA.next(), resB = keysB.next();

				if (resA.done) {
					break;
				}


				if (!compareRecursively(resA.value, resB.value)) {
					return false;
				}
			}
		} else if (objA instanceof Map) {
			if (objA.size !== objB.size) {
				return false;
			}

			const entriesA = objA.entries();
			const entriesB = objB.entries();

			while (true) {
				const resA = entriesA.next(), resB = entriesB.next();

				if (resA.done) {
					break;
				}


				if (!compareRecursively(resA.value, resB.value)) {
					return false;
				}
			}
		} else {
			for (const key in objA) {
				if (!(key in objB)) {
					return false;
				}
			}

			for (const key in objB) {
				if (!(key in objA) || !compareRecursively(objA[key], objB[key])) {
					return false;
				}
			}
		}

		return true;
	}

	return compareRecursively(objA, objB);
}

As with cloning, it's not perfect, but it's fine in most cases. It also supports Set, Map, RegExp, Node and HTMLElement.

Sometimes we need to do partial compare, for example check if the object is contained within another. This can be easily done, we just need to lax the condition for arrays and objects, thats it.

Proposal for Records & Tuples

There is a proposal for Records & Tuples. It is in stage 2 at the time of this article. When it finally makes it into JS, it will create a native mechanism for deep comparisons and create a lot of potentials for optimizations.