Best 3 Ways to Clone JavaScript Object

In this article, we will discuss three best and easy ways to clone a JavaScript object.

Clone a JavaScript object using JSON.#

This is a fast way to clone an object with no circular references or functions. It works by serializing the object to JSON and then parsing it back into a new object.

<script>
 let obj = { a: 1, b: { c: 2 } };
 let newObj = JSON.parse(JSON.stringify(obj));
 console.log(newObj)
</script>

1. The code initializes an object obj with two properties: a and b, where b is another object with a property c.
2. The JSON.stringify method serializes the obj object into a JSON string representation. This JSON string is a stringified version of the original object.
3. The JSON.parse method generates a new object from the JSON string representation of obj, creating a deep copy of the object.
4. The new object is assigned to the newObj variable.

JavaScript program to clone object using Object.assign() method.#

This is a shallow copy, meaning that it only copies the top-level properties of the object. It creates a new empty object and assigns all the properties of the original object to the new one.

<script>
 let obj = { a: 1, b: { c: 2 } };
 let newObj = Object.assign({}, obj);
 console.log(newObj)
</script>

1. The code initializes an object named obj with two key-value pairs: a with a value of 1, and b with a value of an object containing a key-value pair of its own (c: 2).
2. The code then creates a new object named newObj.
3. Then, the Object.assign() method is used to copy all properties from obj to newObj.
4. The first argument passed to Object.assign() is an empty object ({}), which acts as the target object that will receive the copied properties.
5. As a result of this code, newObj is now a shallow copy of obj, meaning that its own properties are identical to obj, but any nested objects or arrays are still references to the same objects/arrays as those in the original obj.

Clone a JavaScript object using spread operator. #

This is similar to Object.assign({}, obj), but uses the object spread operator instead. It creates a new object and copies all the properties from the original object into the new one.

<script>
 let obj = { a: 1, b: { c: 2 } };
 let newObj = { ...obj };
 console.log(newObj)
</script>

1. The code creates an object obj with two properties: a with a value of 1, and b with a nested object containing a property c with a value of 2.
2. The code then creates a new object newObj using the spread syntax (...), which essentially creates a shallow copy of obj.
3. The shallow copy means that newObj has the same properties and values as obj.
4. However, any nested objects or arrays within obj are still references to the original objects, and not unique copies.
5. Therefore, any changes made to nested objects or arrays within newObj will also be reflected in the original obj object.

There are a few more ways you can use to clone a JavaScript object.

Object.create() : This method creates a new object with the specified prototype object and properties. It is a shallow copy, meaning that it only copies the top-level properties of the object.

<script>
 let obj = { a: 1, b: { c: 2 } };
 let newObj = Object.create(obj);
 console.log(newObj)
</script>