How to clone an object in JavaScript

In JavaScript, you can clone an object by creating a new object and copying the properties of the original object into it. Here are a few methods to clone an object:

Using Object.assign() method:

Example:

Output:

{ a: 1, b: 2 }

In this example, the Object.assign() method is used to create a new object ({}) and assign the properties of obj1 to it. The resulting object (obj2) is a clone of obj1.

Using the spread operator:

Example:

Output:

{ a: 1, b: 2 }

In this example, the spread operator (...) is used to create a new object ({}) and assign the properties of obj1 to it. The resulting object (obj2) is a clone of obj1.

Using JSON.parse() and JSON.stringify() methods:

Example:

Output:

{ a: 1, b: 2 }

In this example, the JSON.stringify() method is used to convert the obj1 object into a JSON string, and then the JSON.parse() method is used to convert the JSON string back into a JavaScript object. The resulting object (obj2) is a clone of obj1.

Note that this method may not work correctly if the original object contains non-JSON-safe data types, such as functions or undefined values.

Choose the method that best suits your use case and be aware of any limitations of each method. Here's another example of cloning an object using the Object.create() method:

Output:

{}
1
2

In this example, the Object.create() method is used to create a new object (obj2) with its prototype set to obj1. This creates a new object that inherits all the properties and methods of obj1. The resulting object (obj2) is a clone of obj1.

You can also use various libraries and frameworks, such as Lodash and jQuery, to clone objects in JavaScript. These libraries provide additional features and options for cloning objects, such as deep cloning and copying only certain properties. Here's another example of cloning an object using the spread operator and modifying the cloned object:

Output:

{ a: 1, b: 2, c: 3 }

In this example, the spread operator (...) is used to create a new object (obj2) and assign the properties of obj1 to it. The c property is then added to obj2, resulting in a new object that has all the properties of obj1 and the additional c property.

Note that modifying the cloned object may also modify the original object, since objects are passed by reference in JavaScript. If you need to avoid modifying the original object, you can use one of the other cloning methods mentioned earlier, such as Object.assign() or JSON.parse()/JSON.stringify().

Here's an example of deep cloning an object using the Lodash library:

Output:

{ a: 1, b: { c: 2, d: 3 }, e: [ 4, 5, 6 ] }
{ a: 1, b: { c: 20, d: 3 }, e: [ 4, 50, 6 ] }
{ a: 1, b: { c: 2, d: 3 }, e: [ 4, 5, 6 ] }

In this example, the _.cloneDeep() method from the Lodash library is used to create a deep clone of the obj1 object. A deep clone means that all nested objects and arrays are also cloned, rather than just copying their references. It ensures that modifying the cloned object does not modify the original object.

After cloning the object, the b.c property and the e[1] element are modified in obj2. These changes do not affect the original obj1 object, as they are working with a separate copy of the data.

Note that you need to install and import the Lodash library before using it in your code. You can install it using npm or another package manager.