

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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?
Cloning
Cloning in javascript is nothing but copying an object properties to another object so as to avoid creation of an object that already exists.
There are a few ways to clone a javascript object.
1) Iterating through each property and copy them to a new object.
2) Using JSON method.
3) Using object.assign() method.
Let's discuss each method individually
a) Iterating through each property and copy them to a new object.
This is an old method to clone a javascript object in which each property will be iterated and copied to a new object.It's a simple method but seldom it is used.
Example
<html> <body> <p id="cloning-1"></p> <script> const sourceObject = {name:"salman", age:23, salary:25000}; let requiredObj = {}; for (let pro in sourceObject) { if (sourceObject.hasOwnProperty(pro)) { requiredObj[pro] = sourceObject[pro]; } } document.getElementById("cloning-1").innerHTML = "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary; </script> </body> </html>
Output
targetObject name = salman, age = 23, salary = 25000
b) JSON method
It is one of the modern methods to clone a JavaScript object.In this method, source object must be JSON safe.
Example
<html> <body> <p id="cloning-2"></p> <script> const sourceObject = {name:"salman", age:23, salary:25000}; let requiredObj = {}; requiredObj = JSON.parse(JSON.stringify(sourceObject)); document.getElementById("cloning-2").innerHTML = "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary = "+requiredObj.salary; </script> </body> </html>
Output
targetObject name = salman, age = 23, salary = 25000
c) Object.assign()
This is an advanced method used very frequently now a days to clone javascript objects.This method does only shallow copy which means that nested properties are still copied by reference.
Example
<html> <body> <p id="cloning-3"></p> <script> const sourceObject = {name:"salman", age:23, salary:25000}; let requiredObj = {}; requiredObj = Object.assign({}, sourceObject); document.getElementById("cloning-3").innerHTML = "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+",salary"+requiredObj.salary; </script> </body> </html>
Output
targetObject name = salman, age = 23, salary = 25000
- Related Questions & Answers
- How to clone an object using spread operator in JavaScript?
- How to clone a Date object in JavaScript?
- What is the most efficient way to deep clone an object in JavaScript?
- How to clone an array using spread operator in JavaScript?
- How to clone a js object except for one key in javascript?
- How to clone an element using jQuery?
- How to freeze an Object in JavaScript?
- How to invert an object in JavaScript?
- Clone an ArrayList in Java
- How to access an object through another object in JavaScript?
- How to convert an object into an array in JavaScript?
- How to define methods for an Object in JavaScript?
- How to de-structure an imported object in JavaScript?
- How to remove an object using filter() in JavaScript?
- How to create an object with prototype in JavaScript?