How to Clone a JavaScript Object

Cloning an object in JavaScript is a common task for any project: from simple objects to complicated ones.

As a rule, the assignment operator doesn’t generate a copy of an object. It is capable of assigning a reference to it.

Let’s check out the following code:

Javascript copy object by reference

The <kbd class="highlighted">object</kbd> variable is a container for a newly initialized object. The <kbd class="highlighted">copy</kbd> variable points to the same object and holds a reference to it. Because both variables reference the same memory location, modifying one affects the other. This behavior breaks immutability and can lead to bugs.

There is a naive way to copy objects: it’s looping through the original one copying every property one after another. The code will look like this:

Javascript copy objects

But note that there can be inherent issues, such as:

• <kbd class="highlighted">objectCopy </kbd> obtains a new <kbd class="highlighted">Object.prototype</kbd> method that differs from <kbd class="highlighted">mainObject</kbd> object prototype method. But it’s not what you want if you wish a copy of the original object.
• Property descriptors can not be copied. A “writable” descriptor, including a value set to be false, will be true within the <kbd class="highlighted">objectCopy</kbd> object.
• The code that was shown above copies the enumerable properties of <kbd class="highlighted">mainObject</kbd>.
• In case a property inside the original object is an object, it can be shared between the copy and the original one.

Notice that by nature, JavaScript objects are changeable and are stored as a reference. So, when assigning the object to another variable, you assign the memory address of the object to the variable. In such circumstances, the old and new objects point to the same memory address. Every change in one of them will be reflected in the other. Hence, assigning one object to another will not copy your object.

Shallow copy with Spread Syntax or Object.assign

The spread syntax is one of the shortest and simplest methods of copying and/or merging objects.

The example will look as follows:

Javascript object spread syntax

The Object.assign() method is applied for copying all the enumerable properties from one or more source objects to the targeted object returning it.

Here is an example:

Javascript object copy all enumerable properties

So, the spread syntax and <kbd class="highlighted">Object.assign</kbd> are standard ways to copy an object. They are equivalent.

The problem with the methods above is that they implement a shallow copy. So, a new object is generated, which obtains the precise copy of the values of the original object. But notice that if any of the object fields is a reference to the other objects, simply the reference address is copied: only the memory address is copied.

The example is as follows:

Javascript object copy all properties

These methods are handy, but you are not recommended to use them when you have nested objects in the object that you want to copy.

Using JSON.stringify and JSON.parse

A deep copy takes place when you copy an object with the objects to which it refers. You can do it by applying the mixture of JSON.stringify and JSON.parse for creating a deep copy.

First, you should use <kbd class="highlighted">JSON.stringify()</kbd> to convert the object to a string, and then <kbd class="highlighted">JSON.parse()</kbd> to parse it back into a new object. The new object has its own memory address and is independent of nested object fields. However, note that this method cannot copy functions, undefined, Symbol values, or Date objects, and it will fail on circular references.

Here is an example of the deep cloning:

Javascript object clone

Modern Deep Cloning with structuredClone()

For a more robust and modern approach, JavaScript provides the built-in <kbd class="highlighted">structuredClone()</kbd> method. It correctly handles most data types, including Date, Map, Set, and nested objects, while still failing on functions and circular references. It is the recommended standard for deep cloning in current JavaScript.

Here is an example:

Javascript structuredClone