How to Clone a JavaScript Object?

Cloning an object in JavaScript is not an easy task because if you have ever tried to create a copy of a JavaScript object then it’s very common for you to encounter that “Objects are assigned by reference”. This means that if you directly try to assign an object to a new variable, both variables are pointing to the same data. Modifying one of them affects the other. To avoid these you have to use other methods for cloning objects. In this blog, you’re going to learn about Object Cloning and methods to clone an object in JavaScript along with various examples. 

Table of Contents:

• Understanding Object Cloning
  • Shallow Cloning
  • Deep Cloning
• Methods For Cloning JavaScript Object
• Problem While Cloning An Object In JavaScript
  • Shallow Cloning Methods
    • Method 1: Using Object.assign()
    • Method 2: Using the Spread Operator ( {…} )
  • Deep Cloning Methods
    • Method 1: Using JSON.parse(JSON.stringify())
    • Method 2: Using Lodash’s
• Performance Considerations
• Conclusion

Understanding Object Cloning

Objects are non-primitive datatypes in JavaScript. It is the collection of key-value pairs. Cloning a JavaScript object means copying all its key-value pairs into another new variable. Before learning about methods in JavaScript for cloning an object it’s important to understand the two types of cloning one is Shallow Cloning and other is Deep Cloning.

Shallow Cloning

In shallow cloning, the new object is created with a new reference. In this cloning method, only top-level properties are copied. Nested objects remain referenced.

Deep Cloning

Deep cloning recursively copies all the levels of the object. In other words, In deep cloning, a new object is the exact copy of the original object. And if the changes are made in one of them, no changes are reflected in the other. Both objects are independent objects.

Problem While Cloning An Object In JavaScript

The problem is simple, whenever you try to assign an object to another variable in JavaScript, then you find both variables reference the same memory location. This means if you can do changes in one of them then the same changes are reflected in the original object.

Example:

Output:

Explanation: Here in this example, the copy object is another reference to the person object. Thus, both are interdependent on each other if you can make changes in one object then the same changes are reflected in another object. Like in example, you’re changing the name in the copy object but the name is changed in the company object also.

Methods For Cloning JavaScript Object

Here, are the various methods that are used to perform shallow and deep cloning in JavaScript. Let’s discuss each one by one:

Shallow Cloning Methods

If your object is simple without any nested object then Shallow Cloning is sufficient for you. In JavaScript, you can perform shallow cloning by using these methods:

Method 1: Using Object.assign()

Object.assign() is a built-in method that is used to create a shallow copy of an object in JavaScript. It works for top-level only i.e. if your object contains nested objects then it will not work properly for them. 

Example:

Output:

Explanation: In this example, you’re using an Object.assign() method for creating a shallow copy of the company object. And both objects are independent of each other.

Method 2: Using the Spread Operator ( {…} )

You can also do shallow copies of JavaScript objects using the spread operator. It is more concise than the Object.assign() method. This also works well for flat objects only.

Example:

Output:

Explanation: Here, you’re using the spread operator for cloning an object in this example shallowCopy object is a clone of a company object. Changing course in shallowCopy doesn’t affect the value of the course in the company object.

Deep Cloning Methods

For Objects with nested properties, deep cloning is used. Here are some of the methods by using which you can perform deep cloning in JavaScript.

Method 1: Using JSON.parse(JSON.stringify())

It is a simple and effective way to clone JavaScript objects. It can handle nested objects also i.e. if you can change the properties of nested objects then no change is reflected in the original object.

Example:

Output:

Explanation: In this example, deep cloning is performed by using JSON.parse(JSON.stringify(company)). This can form a completely independent object (deepCopy). Changes made inside the deepCopy object are not reflected in the company object.

Method 2: Using Lodash’s

Lodash is a JavaScript library that is widely used for performing deep cloning of objects. This can done by using the .cloneDeep() function.

Example:

Output:

Explanation: In this example, you are using the .cloneDeep() method of the Lodash library for perfoming deep copies of the objects.

Performance Considerations

Shallow cloning is faster and best for cloning simple objects i.e. it is suitable only when your objects have top-level properties without nested objects. It creates a new object and copies all primitive values but if the property is an object or array (any reference data type) then it remains a reference to the original.

While Deep cloning is generally slower than shallow cloning. It ensures full independence i.e. no matter object contains a nested object or not, if changes are made in the copied object no changes are reflected in the original object.

Conclusion

Now you have a clear understanding of each and every method that is used for cloning objects in JavaScript. like Spread operator ({…}) or Object.assign() method for simple objects. and JSON.stringify() or Lodash for deep cleaning. Understanding these methods helps you to write efficient code.

To learn more about JavaScript and practicing interview questions follow our JavaScript Interview Questions sheet prepared by industry experts.

How to Clone a JavaScript Object – FAQs