JavaScript Objects: Shallow and Deep Copy | All You Need to Know in 10 mins!

hello everyone welcome to my channel in this video i'm going to talk about javascript objects and how can we perform shallow and deep copy of these objects so as you can see in my screen let's start writing some javascript code to start with i'm creating a developer object and with only one property and then if i create another developer object and assign it the previous developer one object and if i log this to developer objects i would essentially see that both of them are printing out the same thing so far so good i have both of these objects printing out the same object in here but the problem is objects are reference types so the moment i have executed line number three what actually is happening the developer two is actually having a copy of the memory address for developer one so essentially if i happen to change anything on developer two let's say i give it a name to vishnu remember my colleague's name and if i happen to execute this again i would see that even the first developer's name is changed so this is an example of shallow copy where i have copied developer one into developer two and as a result of that when as in when i change the developer 2 i get the same change reflected into developer 1. so there are several ways to avoid this and to do so how we can do is one first thing i wanted to show you is through object.assign and instead of running line number three if i run object dot assign and give it an empty object which is my target object the new object that i'm going to create and the source object is developer 1. so in this case i am creating an empty object from the developer one and then if i change developer two's name to again in this case if i run this code you would see that the developer 2 has independently changed its name from the launcher to vishnu however developer 1 is still kept intact there is another way of doing the same thing achieving the same result is using the es6 spread operator so here i am spreading out developer 1 and creating another object from it assigning it to developer 2 and if i run this i am expecting the same result developer 2 independently changed its name to vishnu but this is not a full proof solution you see the moment i start getting a nested object inside my first object so let's say i have now skills added to it and this is a nested object and as a primary let's say full stack and here i have a secondary let's say devops and now i have a nested object inside the developer one and when i'm creating developer 2 with either a spread operator or through object assign i could also access developer tools skills the primary and let's say i change it to front end okay if i happen to do so the problem is the moment i have a nested object using either a spread operator or object assign doesn't really perform a full deep clone as you can see here my nilanjan developers primary scale is also changed from full stack to front end okay there is a typo and front end okay so if i run it again you will see the same result okay but that's not good that's not something we want here to be copied we want this to be uh changed independently this developer 2 and developer 1 also so how we can achieve this further is by letting this go okay so we don't want this to happen we saw this object dot assign and spread operator essentially performs a partial dip copy so what we can do is we can do json.parse and then we do json.stringify previous the source object which is the developer one so what i'm doing here i'm actually stringifying the developer one into a json string and then again parsing that json string and creating another object from it so this is an example of how we can do dip clone let's say if i run it now and as you can see here successfully i have the engine and the skills still remaining full stack and even though i have changed the developer two's skills and name they are changing independently so jsonparse and json stringify works absolutely well until and unless you have a catch here if you happen to have let's say some functions here okay let's say for the sake of demo calculate age and here i have a function anonymous one of course and for now let's say return 30 okay if i do the json string if i let's let it be here just for the demo and also let's say i have joining date okay just for the sake of demo i create a date object okay something interesting happens the moment i do json.parse and json.stringify let's execute this code and we'll see what [Music] what did i oh okay this is not required let's clean it off tada so as you can see here the function that i had in calculate h in my first source developer 1 is missing is totally lost when we did json parse this and stringify on the developer 2 right here another thing to notice is the date the joining date is no more an object on developer 2 the developer vishnu it's a string object we could quickly check that here we can log the type of um developer one dot joining date and okay i can just manage the braces correctly and if i do the same thing here for developer two you would see again let me clear this and run it again and i would see this is the type of where it is coming from is an object where is this a string that means for certain types as an example date the type original type is lost when we run json parse and json stringify when we are doing deep cloning so as evident here we could see a couple of things which are missing with json parse and json string one is the function if i happen to have a nested function inside of object inside an object and i then copy it in developer two uh through jsonparse and jsonstringify although on on on surface it looks like a deep cloning my function is lost and also i lose my types especially for an example date so what do i do are there any clean approaches for that fortunately yes for that what we have to do is i personally rely on certain uh libraries so one cool library is the lowdash so i'm just going to install the low dash here and it would be fast to get it loaded and the moment i have this loaded let me include this here so i have low dash loaded and now if i want to copy this string what i would do is use this low dash yeah so there is this clone deep and i give here and i do not need this anymore okay so what i'm doing here just to format it clearly now i have the developer two and i'm using the low dash remember i have this constant and i'm loading low dash library this is the third party library i have just now installed it and now i'm using its function clone deep clone and the rest of the things remain same and now if i run this code i'm just clearing this off and if i run this code you would see i do have save it first and here i run it again and i do have all the walls we had in the previous approaches rectified and my luncheon is having the skills calculated function joining date and joining date is an object and the one which we just now did a deep clone is having vishnu scales are intact i do get the calculated function as it was and joining date here is an object so as we saw here different ways of copying an object javascript object we learned first few of the partial deep cloning techniques like using the object assign and using the spread operator and soon we could realize that if i happen to have a nested object inside then this two mechanism these two techniques don't work and then we looked at it jsonparse and jsonstringify they seems to be giving us the right answer for nested object however they don't work with functions and types then we installed quickly a library low dash a third party library for the npm installation and then we used its method clone deep clone cloning it deeply and then we could see that everything works as we have expected so here is that quick uh tips i wanted to share a quick tutorial i wanted to share how do we deal with javascript objects and the shallow copy and deep copy of it

Channel: Strong Coffee Code

Views: 5,572

Keywords: JavaScript, ShallowCopy, DeepCopy, JavaScriptObjects, lodash, spread operator, shallowvsdeep

Id: E3dboLSBeJc

Length: 12min 44sec (764 seconds)

Published: Fri Sep 18 2020