Deep clone and deep equal

The idea

In JavaScript, a === b on two objects only checks whether they are the same object in memory. Two separate objects with the same contents are not ===. And { ...settings } copies only the top level: nested objects inside are still shared, so changing the copy's nested values changes the original too.

A deep clone makes a new object for every object and array inside, all the way down. A deep equal check compares two values the same way: same kind (array or object), same keys, and deep-equal values under each key. Both are recursive: they call themselves on each child value.

Objects can point back at themselves, like a tree node with a parent link. A naive recursion then goes around the loop forever. The fix is a seen map from each original object to its copy. Before copying an object, check seen: if it is there, reuse the copy. That also keeps shared references shared in the copy.

An everyday example

From the slow way to deep clone and deep equal

1. Start with the obvious copies. { ...settings } and Object.assign copy only the top level, so copy.theme is the very same object as settings.theme, and changing one changes the other. JSON.parse(JSON.stringify(settings)) copies every level, but it drops undefined values and functions, turns a Date into a string, and throws on data that points back at itself.
2. A real copy makes a new object for every object inside, all the way down. That is a recursion: a primitive like a number or string is returned as is, since it can't be changed anyway, and an object or array becomes a new empty one whose keys are filled by copying each child. For data shaped like a tree, that's enough.
3. But app data isn't always a tree. A document can list the same user as owner and as editors[0]. The simple recursion copies that user twice, so in the copy the two are different objects, and the shape has changed. Worse, if the user points back at the document, the recursion goes around the loop until the call stack overflows.
4. Both problems have one fix: remember what you've already copied. Keep seen, a Map from each original object to its copy. Check it before copying, and record the new copy before filling it, so a loop back finds the half-built copy. That recursion with a memory is deep clone; deep equal is the same walk over two values at once, comparing kinds, key counts, and each key's values.

How it works

1. If value isn't an object (a number, string, boolean, null, or undefined), return it as is. Primitives can't be changed, so sharing them is safe.
2. If seen already has value, return its copy. This handles loops and shared objects.
3. Make an empty copy, an array if value is an array, otherwise a plain object.
4. Record seen.set(value, copy) before copying children, so a child pointing back finds the copy.
5. For each key of value, set copy[key] = deepClone(value[key], seen), then return copy.
6. For deepEqual(a, b): return true if a === b; false if either isn't an object or one is an array and the other isn't; otherwise compare key counts and then each key's values with deepEqual.

Watch it run

This picture runs the code below on a real input. Press Step to move one step at a time, or Play to watch. The highlighted line is the one that just ran. Change the input to see other cases.

The code

Point at a note to light up the lines it explains.

How fast it is

Each object, array, and key is handled once. The seen map and the recursion depth can grow with the number of objects.

• Best caseO(1)

  value is a primitive, like 42, so the first line returns it. For deepEqual, the two values are the same reference or have different key counts at the top.

• Average caseO(n)

  A typical nested state object: every object, array, and key is handled once.

• Worst caseO(n)

  Every value is an object with keys to visit. Shared objects and loops don't add work, because seen returns them at once.

Common mistakes

• Using { ...obj } or Object.assign and calling it a deep copy. Nested objects are still shared.
• Using JSON.parse(JSON.stringify(obj)). It drops undefined and functions, turns Date into strings, and throws on cycles.
• Adding to seen after copying the children. Cycles then recurse forever.
• Comparing only the keys of a in deepEqual. { a: 1 } would equal { a: 1, b: 2 }. Compare key counts too.

When to use it

Look for these clues in a problem:

• The question asks for a copy that shares nothing with the original, or a check that two nested values have the same contents.
• The data is nested objects and arrays of any depth.
• It mentions cycles, shared references, or structuredClone.
• Changes to a copy must not affect the original, as with immutable state updates.

Check yourself

Answer each one in your head first, then open it.

Practice problems

Stuck on one? Tuto is in the playground too, and gives you hints, never the answer.

Go further

You don't need these to start practicing. Open one when you want more.

Related algorithms

• RecursionA function solves a problem by calling itself on a smaller piece of the same problem.
• Counting with a hash mapCount how many times each value appears in one pass, by keeping a running tally per value in a Map.
• Depth-first search (DFS)Explore a graph by following one path as deep as it goes, then backing up to try the next unexplored branch.
• Flattening nested dataTurn nested arrays or objects into a single flat level, going only as deep as you ask.