Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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:
<!DOCTYPE html>
<html>
<head>
<script>
const employee = {
name: 'Dhoni',
age: 41,
height: 5.8,
}
document.write(JSON.stringify(employee));
</script>
</head>
</html>
{"name":"Dhoni","age":41,"height":5.8}
The Problem with Direct Assignment
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.
<!DOCTYPE html>
<html>
<head>
<script>
const employee = {
name: 'Dhoni',
age: 41
}
const copyemp = employee;
copyemp.name = 'Kohli';
copyemp.age = 34;
document.write("Copy name: " + copyemp.name + "<br>");
document.write("Original name: " + employee.name + "<br>");
document.write("Both objects reference the same memory location");
</script>
</head>
</html>
Copy name: Kohli Original name: Kohli Both objects reference the same memory location
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.
- Using JSON.parse() and JSON.stringify().
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() and JSON.stringify()
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>");
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
Comparison of Cloning Methods
| Method | Shallow Copy | Deep Copy | Handles Functions | Performance |
|---|---|---|---|---|
Object.assign() |
Yes | No | Yes | Fast |
Spread Operator (...) |
Yes | No | Yes | Fast |
JSON.parse/stringify |
No | Yes | No | Slower |
Conclusion
Object cloning in JavaScript can be achieved through multiple methods. Use spread syntax (...) for shallow cloning as it's the most readable and modern approach. For deep cloning simple objects without functions, use JSON.parse(JSON.stringify()).
5K+ Views
