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
What is the most efficient way to deep clone an object in JavaScript?
In JavaScript, objects are the collection of a key value pairs. The properties of the object are the keys and is denoted with a string. The value of the key is the value of the property of the given object. In JavaScript, the objects can be copied to other by many ways in which some of them are discussed below.
Using spread operator(…),
Using assign() function and
Using JSON.parse() and JSON.stringify() functions.
Using the Json.parse() and Stingify() methods
Among the above mentioned three ways, for an object to be deep cloned, JSON.stringify() and JSON.parse() functions are used.
The parse() method accepts a JSON String as a parameter and creates a JavaScript object accordingly.
The stringify() method converts the value of a JavaScript object into a JSON String.
Using these two methods you can copy the original object in a quick and easy way into a new object. Parse can be used to copy when the given input is numbers, strings and Object literals. The parse() function will parse the string to JavaScript object, by doing this the two objects will have their individual memory.
Syntax
The syntax of parse function is given below.
JSON.parse(JSON.stringify(originalObjectName))
Example 1
This example of the parse() method. and stringify() to copy objects −
let employee = { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', emp_id: 'TP10000', role: 'Software Engineer-Intern', salary: 18000 } let cpyEmployee = JSON.parse(JSON.stringify(employee)) console.log("This is the original object:",employee) console.log("This is the new copied object:",cpyEmployee) cpyEmployee.emp_name = 'B Jason' cpyEmployee.emp_id = 'TP9999' cpyEmployee.role = 'Content Writing-Intern' console.log("The copied object with updations is:",cpyEmployee)
Example 2
Following is another example of cloning objects using the parse() and stringify() methods −
let obj = { foo: 1, bar: { baz: 'test' } } let newObj = JSON.parse(JSON.stringify(obj)); obj.bar.baz = 20; console.log(obj); console.log(newObj);
Object.assign() method
The OBJECT.assign() function is used to copy the original object into a new object. The difference in this and the spread operator is when nested objects are present and if assign() is used to copy the object, then the nested object will not change and the other variables of the object can be changed.
Example
This example demonstrates how assign() is used to merge objects in JavaScript.
var empDetails = { emp_name: "Abdul Rawoof", emp_sex: "M", emp_age: 23 } var empCompany = { emp_id: "TP1000", emp_role: "Software Engineer-Intern", emp_salary: 18000 } console.log("The employee details object is:", empDetails) console.log("The employee company object is:",empCompany) var mergeObj = Object.assign({},empDetails,empCompany) console.log("The merged object is",mergeObj)
939 Views
