What is shallow copy and deep copy in JavaScript ?

14 Feb, 2022
JavaScript is a high level, dynamically typed client side scripting language. JavaScript adds functionality to static HTML pages. Like most other programming languages JavaScript allows supports the concept of deep copy and shallow copy. 
Shallow Copy: When a reference variable is copied into a new reference variable using the assignment operator, a shallow copy of the referenced object is created. In simple words, a reference variable mainly stores the address of the object it refers to. When a new reference variable is assigned the value of the old reference variable, the address stored in the old reference variable is copied into the new one. This means both the old and new reference variable point to the same object in memory. As a result if the state of the object changes through any of the reference variables it is reflected for both. Let us take an example to understand it better.
Code Implementation
Javascript
var employee = {    eid: "E102",    ename: "Jack",    eaddress: "New York",    salary: 50000}  console.log("Employee=> ", employee);var newEmployee = employee;    // Shallow copyconsole.log("New Employee=> ", newEmployee); console.log("---------After modification----------");newEmployee.ename = "Beck";console.log("Employee=> ", employee);console.log("New Employee=> ", newEmployee);// Name of the employee as well as// newEmployee is changed.
Output:
Explanation: From the above example, it is seen that when the name of newEmployee is modified, it is also reflected for the old employee object. This can cause data inconsistency. This is known as shallow copy. The newly created object has the same memory address as the old one. Hence, any change made to either of them changes the attributes for both. To overcome this problem, deep copy is used. If one of them is removed from memory, the other one ceases to exist. In a way the two objects are interdependent.
Deep Copy: Unlike the shallow copy, deep copy makes a copy of all the members of the old object, allocates separate memory location for the new object and then assigns the copied members to the new object. In this way, both the objects are independent of each other and in case of any modification to either one the other is not affected. Also, if one of the objects is deleted the other still remains in the memory. Now to create a deep copy of an object in JavaScript we use JSON.parse() and JSON.stringify() methods. Let us take an example to understand it better.
Code Implementation:
Javascript
var employee = {    eid: "E102",    ename: "Jack",    eaddress: "New York",    salary: 50000}console.log("=========Deep Copy========");var newEmployee = JSON.parse(JSON.stringify(employee));console.log("Employee=> ", employee);console.log("New Employee=> ", newEmployee);console.log("---------After modification---------");newEmployee.ename = "Beck";newEmployee.salary = 70000;console.log("Employee=> ", employee);console.log("New Employee=> ", newEmployee);
Output:
Explanation: Here the new object is created using the JSON.parse() and JSON.stringify() methods of JavaScript. JSON.stringify() takes a JavaScript object as argument and then transforms it into a JSON string. This JSON string is passed to the JSON.parse() method which then transforms it into a JavaScript object. This method is useful when the object is small and has serializable properties. But if the object is very large and contains certain non-serializable properties then there is a risk of data loss. Specially if an object contains methods then JSON.stringify() will fail as methods are non-serializable. There are better ways to deep clone of which one is Lodash which allows cloning methods as well.
Lodash To Deep Copy: Lodash is a JavaScript library that provides multiple utility functions and one of the most commonly used function of the Lodash library is the cloneDeep() method. This method helps in deep cloning of an object and also clones the non serializable properties which were a limitation in the JSON.stringify() approach.
Code Implementation
Javascript
const lodash = require('lodash');var employee = {    eid: "E102",    ename: "Jack",    eaddress: "New York",    salary: 50000,    details: function () {        return "Employee Name: "            + this.ename + "-->Salary: "            + this.salary;    }} var deepCopy = lodash.cloneDeep(employee);console.log("Original Employee Object");console.log(employee);console.log("Deep Copied Employee Object");console.log(deepCopy);deepCopy.eid = "E103";deepCopy.ename = "Beck";deepCopy.details = function () {    return "Employee ID: " + this.eid        + "-->Salary: " + this.salary;}console.log("----------After Modification----------");console.log("Original Employee Object");console.log(employee);console.log("Deep Copied Employee Object");console.log(deepCopy);console.log(employee.details());console.log(deepCopy.details());
Output:
Explanation: Both the objects have different properties after the modification. Also methods of each object is differently defined and produce different output.
better way to deepcopy in javascript
https://www.geeksforgeeks.org/how-to-deep-clone-in-javascript/
hguru001
javascript-basics
JavaScript-Misc
Picked
Technical Scripter 2020
JavaScript
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?