Deep Copy And Shallow Copy In Java Script

Introduction:

The Lodash library in javascript allows developers to copy/clone objects by value through methods like clone( ), cloneWith( ), and cloneDeepWith( ). In this article, we’ll explain how to perform deep copy of objects and arrays in javascript lodash’s cloneDeep method. We’ll also learn about the types of cloning methods in this blog, starting with the number of types of cloning in javascript. A deep copy means that all of the values of the new variable are copied and disconnected from the original variable whereas a shallow copy means that certain (sub-)values are still connected to the original variable.

Types Of cloning : -

Deep Copy

The Deep copy method copies all fields and makes copies of dynamically allocated memory pointed to the fields. Deep copy method is manifested when an object is copied along with the objects to which it refers.

Let's take an example to understand the deep cloning.

Deep copy makes a copy of all the members of A, allocates different memory locations for B, and then assigns the copied members to B to achieve deep copy. In this way, if A vanishes B is still valid in the memory.

Shallow Copy

The shallow copy is a bit-wise copy of an object. In the shallow copy, a new object with an exact copy of the values in the original object is created. If any of the fields of the object are references to other objects, just the reference addresses are copied, that is, only the memory address is copied.

Let's take an example to understand the shallow cloning.

Shallow Copy makes a copy of the reference of A into B. Think about it as a copy of A’s Address. So, the addresses of A and B will be the same, i.e. they will be pointing to the same memory location.

Difference between deep copy and shallow copy:-

Here we are trying to understand the difference between deep copy and shallow copy using an example:

Cloning is used where you know that they both are totally the same, but yet different as value is stored as two different locations in the memory space.

Consider this example:

var employeeDetailsOriginal = { name: 'Suraj', age: 24, Profession: 'Software Engineer' };

Let’s say you want to create a duplicate of this, so that even if you change the values, you can always return to the original.

I can do this:

var employeeDetailsDuplicate = employeeDetailsOriginal; //Shallow copy!

If we change a value:

employeeDetailsDuplicate.name = 'NameChanged';

Above statement change name from employeeDetailsOriginal, since we have a shallow copy or a reference to var employeeDetailsOriginal. This means you’re losing the original data as well.

But, creating a new variable by using the properties from the original employeeDetailsOriginal variable, you can create a deep copy.

var employeeDetailsDuplicate = {Name: employeeDetailsOriginal.name, Age: employeeDetailsOriginal.age, Profession:

employeeDetailsOriginal.Profession}; //Deep copy!

And now if you change employeeDetailsDuplicate.name, it will only affect employeeDetailsDuplicate and not employeeDetailsOriginal

Summary : In this blog, we have learned about the deep cloning and shallow cloning method of the javascript as well as the difference between them.

The most widely used programming language in web and mobile applications, javaScript is a light-weight clientside scripting language that our developers hold expertise in. We are a Java development company that enables enterprises to streamline operations and drive returns, using next-gen technologies, with our development services. Our services include developing applications for all your ERP needs from CRM, WFM, and HRM to eCommerce, accounting, and wealth management software. We use an extensive tech stack including Javascript, Node.js, angular and more to develop end-to-end customized software for your enterprise. Get in touch with our experts to know more about how you can implement these technologies into your business.