- Trending Categories
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 would you deep copy an Object in Javascript?
Clone often refers to copying a value from one place to another. We duplicate one value to another using JavaScript, which is known as cloning. In JavaScript, there are actually two different sorts of copying. The ability to distinguish between deep and shallow clones is something that every programmer, regardless of experience level, should understand.
Since this essay is about deep clones, we shall investigate deep clones in detail. Any data type, including composite data types like arrays and JavaScript, as well as primitive data types (like string and number), can experience the concept of cloning. Therefore, we must understand the fundamentals in terms of understanding it.
For primitive data types, the copying operation in JavaScript is fairly simple. The choice between the Shallow and Deep Copy strategies must be made carefully when working with objects and references.
Deep Clone − In order to prevent data loss during cloning arrays, JavaScript uses a method called deep clone to duplicate every single element.
Example1
In this example, let's see how the data can become corrupted because when we modify the value of one object, it affects all the other objects as well. For this reason, Deep Clone is used to solve the problem.
<!DOCTYPE html> <html> <title>How would you deep copy an Object in Javascript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> let engTeacher ={ name : "John Smith", Institute : "Tutorialspoint" } let mathTeacher = engTeacher ; engTeacher.name = "Steve Smith" document.write("English Teacher name is ",engTeacher.name +"<br>") document.write("Maths Teacher name is ",mathTeacher.name); </script> </body> </html>
Example 2
In this example let us understand how to deep copy an object using spread operator.
<!DOCTYPE html> <html> <title>How would you deep copy an Object in Javascript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> let engTeacher ={ name : "John Smith", Institute : "Tutorialspoint" } let mathTeacher = { ...engTeacher } ; engTeacher.name = "Steve Smith" document.write("English Teacher name is ",engTeacher.name +"<br>") document.write("Maths Teacher name is ",mathTeacher.name); </script> </body> </html>
Example 3
In this example let us understand how to deep copy Using Object.assign()
<!DOCTYPE html> <html> <title>How would you deep copy an Object in Javascript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> let engTeacher ={ name : "John Doe", Institute : "Tutorialspoint" } let mathTeacher = Object.assign( {} ,engTeacher) ; engTeacher.name = "Steve Smith" document.write("English Teacher name is ",engTeacher.name +"<br>") document.write("Maths Teacher name is ",mathTeacher.name); </script> </body> </html>
Example 4
In this example let us understand how to deep copy Using Json.parse and Json.stringify.
<!DOCTYPE html> <html> <title>How would you deep copy an Object in Javascript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> let engTeacher ={ name : "John Doe", Institute : "Tutorialspoint" } let mathTeacher = JSON.parse(JSON.stringify(engTeacher)) engTeacher.name = "Steve Smith" document.write("English Teacher name is ",engTeacher.name +"<br>") document.write("Maths Teacher name is ",mathTeacher.name); </script> </body> </html>
Shallow copy
In a shallow copy scenario, the clone object receives a copy of the original object's memory address whenever the original object is copied into it. This indicates that both point to the same memory address.
Internally, both the original object as well as the copied object refer to the same referenced item. They both point to the same memory address, thus if we made modifications to the cloned object, those modifications would also be reflected in the original object as they both have the same memory address.
Example 5
In this instance, object ‘engTeacher’ has been copied into object ‘mathTeacher’. Since they both internally relate to the same memory address, if the id of object mathTeacher were altered, the id of object ‘engTeacher’ would also be modified. mathTeacher.id = 444 will change the id of object ‘engTeacher’ also.
We refer to this as shallow copy. A shallow copy indicates that any changes we make to the cloned item will also be reflected in the original object.
<!DOCTYPE html> <html> <title>How would you deep copy an Object in Javascript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> let engTEacher = { id: 111, Institute: "Tutorialspoint" }; let mathTeacher = engTEacher; mathTeacher.id = 444; document.write(engTEacher.id +"<br>"); document.write(mathTeacher.id); </script> </body> </html>
- Related Articles
- How do you do a deep copy of an object in .NET?
- Explain Deep cloning an object in JavaScript with an example.
- Deep Copy and Shallow Copy in Java
- Deep Search JSON Object JavaScript
- Copy - Shallow and deep copy operations in Python
- What is deep copy? Explain with an example in Java.
- How to deep flatten an array in JavaScript?
- What is the most efficient way to deep clone an object in JavaScript?
- What is Shallow Copy and how it is different from Deep Copy in C#?
- Python Shallow and Deep Copy operations
- How to create a copy of an object in PHP?
- What is the difference between shallow copy and deep copy in Java?
- Deep Copy of Struct Member Arrays in C
- How Can You Copy Objects in Python?
- How do you copy an element from one list to another in Java?
