JavaScript Copy Object

We will comprehend the JavaScript copy object in this article.

There are various ways to copy objects in JavaScript which are given below:

• Utilizing the spread (...) syntax
• Utilizing the Object.assign() method
• Utilizing the JSON.stringify() and JSON.parse() methods

We will learn about each method properly one by one.

Utilizing the spread (...) syntax

We can copy objects in JavaScript with the help of the spread (...) operator.

Demonstration:

We will utilize the spread (...) operator in this demo.

Code:

Output:

We can witness that the object is copied utilizing the spread (...) operator. We have printed both objects, "person" and "p1" to the console. The "person" is the original object and "p1" is the copied object of "person" which is why they both are identical.

Utilizing the Object.assign() method

We can copy objects in JavaScript with the help of the Object.assign() method.

Demonstration:

We will utilize the Object.assign() method in this demo.

Code:

Output:

We can witness that the object is copied utilizing the Object.assign() method. We have printed both objects "person" and "p2". The "person" is the original object and the "p2" is the copied object of "person".

Utilizing the JSON.stringify() and JSON.parse() methods

We can copy objects in JavaScript with the help of the JSON.stringify() and JSON.parse() methods.

Demonstration:

We will utilize the JSON.stringify() and JSON.parse() methods in this demo.

Code:

Output:

We can witness that the object is copied utilizing the JSON.stringify() and JSON.parse() methods. We have printed both objects "person" and "p3". The person is the original object and "p3" is the copied object of "person".

Both spread (...) and Object.assign() creates a shallow copy whereas JSON methods creates a deep copy.

What is a shallow copy?

A shallow copy stores a new object which is the copy of the original object with a new reference and stores only the reference address of the object. A shallow copy only copies the top-level properties of the original object. The nested objects are shared between the original object and cloned object that means both original object and cloned object are dependent of each other.

What is a deep copy?

A deep copy constructs a new object which is an exact so it copies and stores the copy of all members of the original object that consists of all properties and nested objects. The nested objects are not shared between the original object and cloned object which means both original object and cloned object are independent of each other.

Demonstration of a shallow copy:

Let us comprehend how to construct a shallow copy with the help of demonstrations.

Demo:

We have created a shallow copy with the help of Object.assign() method in the following demo.

Code:

Explanation:

We have created an object called "person" and copied it utilizing Object.assign() method then we have changed the firstName, street and city. After that, we have printed the copied object to the console.

We can witness that the values of firstName, address-street and address-city of the copied object is changed.

Now, we will print the original object to the console utilizing the following code.

We can witness that the values of address-street and address-city of the original object is changed. The value of firstName is not changed because the firstName is a primitive value and other address values are the reference value.

Demonstration of a deep copy:

Let us comprehend how to construct a deep copy with the help of demonstrations.

Demo 1:

We have created a shallow copy with the help of the JSON.stringify() and JSON.parse() methods in the following demo.

Code:

Explanation:

We have created an object called "product" and copied it utilizing JSON.parse() and JSON.stringify() methods then we have changed the productName, description-processor and description-memory. After that, we have printed the copied object to the console.

We can witness that the values of productName, description-processor and description-memory of the copied object is changed.

Now, we will print the original object to the console utilizing the following code.

We can witness that the values of the original object are not changed because the original object and the copied object are disconnected from each other.

Conclusion:

We have understood the JavaScript copy object in this article. We have comprehended three ways to copy an object in JavaScript. The ways are utilizing the spread (...) method, the Object.assign() method, the JSON.stringify() & JSON.parse() methods.