Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to clone an object in JavaScript?
An object is said to be an entity which has properties and types in it. Example, consider a Person as an object and it has properties like height, weight, age and salary. In the similar way JavaScript also have objects and their defined properties.
An object in JavaScript is a complicated data type where it can store various data types in it. Let’s consider this example below
const employee = {
name : ‘Dhoni’,
age : 41,
height : 5.8,
}
Cloning an object using JavaScript
In general, “Cloning” is defined as making a copy of the original object with same properties included in it. These JavaScript objects are stored in memory with the help of references. In memory two variables can point to same object. There is an impact on other variables if we try to modify one object variable.
const copyemp = employee; console.log(copyemp);
In the above case we cannot clone the object simply writing like this, reason is employee is an object.
copyemp.name = ‘Kohli’; copyemp.age = 34; Console.log(copyemp.name); // Kohli Console.log(employee.name); //Kohli
In the above case, the variables of copyemp has same values as of employee object. As the target is not set here, the changes made on the values of copyemp object has applied in employee object too.
We have seen the changes in both of the objects because copyemp and employee are referring to same object.
Cloning of an object can be done in below mentioned ways, they are
- Using object.assign().
- Using Spread Syntax.
- Iterating through each property and copy them to a new object.
Using Object.assign()
JavaScript's "Object.assign()" method will create a duplicate object with all the original object's properties and return it. To implement, need to follow the following steps.
If we are using Object.assign() to clone an object.
Declare an object, considering it as parent object
Assign properties to the parent object
Create clone object and assign it using Object.assign().
Example
In this example we used the method Object.assign(). Using this along with stringify() we can get the contents of a JSON object −
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } const copyemp = Object.assign({}, employee); document.write(JSON.stringify(copyemp), "<br>"); copyemp.name = 'Kohli'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); document.write(JSON.stringify(employee.age)); </script> </head> </html>
Output
The output of the above script will be −
{ name: 'Dhoni', age: 41, role: 'Manager', salary: 80000 }
“Kohli”
34
“Dhoni”
41
Using Spread syntax (…)
The "Spread" operator efficiently copies all of an object's or array's properties into a new object or array. To implement, we need to follow the steps below −
If we are using (…) syntax to clone an object.
Declare an object, considering it as parent object
Assign properties to the parent object
Create clone object and assign it using {… parent object}.
Example
In this example we use the method “Spread syntax” (…). This spread syntax is also used to copy the properties from the parent object.
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } // cloning the object const copyemp = { ... employee} document.write(JSON.stringify(copyemp), "<br>"); // modifying the value of copyemp copyemp.name = 'Peter'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); document.write(JSON.stringify(employee.age)); </script> </head> </html>
Output
The output of the above script will be −
{"name":"Dhoni","age":41,"role":"Manager","salary":80000}
"Peter"
34
"Dhoni"
41
Using JSON.parse()
The JavaScript method JSON.parse() converts a JSON string into an object. The string passed to JSON.parse() will fail if it contains any trailing commas because they are invalid in JSON. To implement this method, need to follow the steps below.
If we are using JSON.parse() syntax to clone an object.
Declare an object, considering it as parent object
Assign properties to the parent object
Create clone object and assign it using JSON.parse()
In JSON.parse() it does not do the work of cloning the object if the object literal is with Functions and Symbol properties. This will only work when object literal is with Number and String.
Example
In this example we are using the JSON.parse() method, this will copy the properties from existing object.
<!DOCTYPE html> <html> <head> <script> const employee = { name: 'Dhoni', age: 41, role: 'Manager', salary: 80000, } // cloning the object const copyemp = JSON.parse(JSON.stringify(employee)); document.write(JSON.stringify(copyemp), "<br>"); // modifying the value of copyemp copyemp.name = 'Peter'; copyemp.age = 34; document.write(JSON.stringify(copyemp.name), "<br>"); document.write(JSON.stringify(copyemp.age), "<br>"); document.write(JSON.stringify(employee.name), "<br>"); </script> </head> </html>
Output
The output of the above script will be −
{"name":"Dhoni","age":41,"role":"Manager","salary":80000}
"Peter"
34
"Dhoni"
5K+ Views
