How to deep clone an object in JavaScript

1structuredClone()Recommended

structuredClone is a global function, so there is nothing to import. It walks the whole value and builds an independent copy: nested objects, arrays, Date, Map, Set, RegExp, typed arrays and circular references all come through. It works on arrays just as well as on objects.

const original = {
  name: "Ada",
  tags: ["admin", "dev"],
  address: { city: "London" },
  joined: new Date(Date.UTC(2026, 8, 24)),
  roles: new Map([["repo", "write"]]),
};

const copy = structuredClone(original);

copy.tags.push("ops");
copy.address.city = "Paris";
copy.roles.set("repo", "read");

console.log(original.tags, original.address.city, original.roles.get("repo"));
console.log(copy.tags, copy.address.city, copy.roles.get("repo"));
console.log(copy.joined instanceof Date, copy.joined.toISOString());
console.log(copy.joined === original.joined);

The first line, [ 'admin', 'dev' ] London write, is the original, untouched by any of the three edits. The copy prints [ 'admin', 'dev', 'ops' ] Paris read. The date is still a real Date (true 2026-09-24T00:00:00.000Z) but a different object, so the last line is false. structuredClone is available in every current browser, Node 17+, Deno and Bun.

2Shallow copies: spread, Object.assign and array copies

{ ...obj } and the older Object.assign({}, obj) create a new object and copy each top-level property into it. For arrays, [...arr], arr.slice() and Array.from(arr) do the same. That is enough when the values are strings and numbers. When a value is itself an object or array, only the reference gets copied, so the nested part is shared.

const user = { name: "Ada", address: { city: "London" } };

const alias = user;                        // not a copy: same object
const spread = { ...user };                // shallow copy
const assigned = Object.assign({}, user);  // shallow copy, older style

spread.name = "Grace";                     // top level: independent
spread.address.city = "Paris";             // nested: shared with user!

console.log(alias === user, spread === user);
console.log(user.name, user.address.city);
console.log(spread.address === user.address, assigned.address === user.address);

// Arrays behave the same way
const matrix = [[1, 2], [3, 4]];
const rows = [...matrix];                  // also matrix.slice(), Array.from(matrix)
rows.push([5, 6]);
rows[0][0] = 99;
console.log(matrix);
console.log(rows);

true false confirms that alias is the same object and spread is not. But user now prints Ada Paris: renaming the copy left the original's name alone, while changing the nested city changed both, because true true shows both copies share the one address object. The array half is the same story. Pushing a row only grew the copy, but rows[0][0] = 99 reached the original too, which now prints [ [ 99, 2 ], [ 3, 4 ] ]. A shallow copy is the right tool for a flat object or an array of primitives. Anything nested needs section 1.

3JSON.parse(JSON.stringify()) and what it loses

Before structuredClone, the common one-liner was to serialize to a JSON string and parse it back. It does produce a deep copy, but only of what JSON can represent. Everything else is converted or dropped without an error, and a circular reference throws.

const original = {
  when: new Date(Date.UTC(2026, 8, 24)),
  missing: undefined,
  ratio: NaN,
  lookup: new Map([["a", 1]]),
  ids: new Set([1, 2]),
  list: [1, undefined, 3],
};

const copy = JSON.parse(JSON.stringify(original));
console.log(copy);
console.log(typeof copy.when);

const node = { name: "root" };
node.self = node;                          // a cycle
try {
  JSON.parse(JSON.stringify(node));
} catch (err) {
  console.log(err.name + ": " + err.message.split("\n")[0]);
}
console.log(structuredClone(node).self.name);

Read the printed copy line by line. when came back as the string '2026-09-24T00:00:00.000Z' (typeof prints string), missing vanished entirely, NaN became null, the Map and Set both became empty {}, and the undefined inside the array turned into null: [ 1, null, 3 ]. The cycle throws TypeError: Converting circular structure to JSON, while structuredClone copies it and prints root. The round trip is still fine for data that is already plain JSON, such as an API response.

4What structuredClone cannot clone

structuredClone copies data, not behaviour. A class instance comes back as a plain object with the same own properties but without its prototype, so its methods are gone. A function anywhere in the value makes the whole call throw a DataCloneError.

class Point {
  constructor(x, y) { this.x = x; this.y = y; }
  length() { return Math.hypot(this.x, this.y); }
}

const p = new Point(3, 4);
const copy = structuredClone(p);
console.log(copy);
console.log(copy instanceof Point, typeof copy.length);

try {
  structuredClone({ onClick() {} });
} catch (err) {
  console.log(err.name + ": " + err.message);
}

// Rebuild the class yourself when you need one back
const restored = Object.assign(new Point(0, 0), structuredClone(p));
console.log(restored instanceof Point, restored.length());

The copy prints as { x: 3, y: 4 }, not Point { x: 3, y: 4 }, and false undefined confirms the prototype and the length method are gone. The object with a method throws DataCloneError: onClick() {} could not be cloned. Copying the cloned data onto a fresh instance restores the class: true 5. For classes you own, a clone() method that calls the constructor is usually clearer. Libraries such as lodash's cloneDeep do keep prototypes, if you already depend on one.

5Which should you use?

6Common variation: copy only the path you change

Often you don't need a full deep clone. In immutable state updates (React, Redux and similar), the pattern is to spread each level on the way down to the one value you change and share everything else. Unchanged parts keep their identity, which is what lets memoized code skip them.

const state = {
  user: { name: "Ada", address: { city: "London", zip: "N1" } },
  todos: [{ id: 1, done: false }, { id: 2, done: false }],
};

// Copy only the path you change; everything else is shared
const next = {
  ...state,
  user: { ...state.user, address: { ...state.user.address, city: "Paris" } },
  todos: state.todos.map((t) => (t.id === 2 ? { ...t, done: true } : t)),
};

console.log(state.user.address.city, next.user.address.city);
console.log(state.todos[1].done, next.todos[1].done);
console.log(next.todos[0] === state.todos[0]);

Prints London Paris and false true: the original state is untouched. The last line, true, shows the todo that didn't change is the very same object in both states. That is cheaper than structuredClone(state) and tells the rest of your code exactly which parts changed.