Copying objects with shallow copy

Transcript

English (Auto-generated)

Hi everyone. Let's go over how we can make shallow copies. So number one strategy that we can use is that we can iterate over an object using the four in the loop. So in order to copy the items of an object into another object we can iterate through the key value pairs of an object and assign them to a second object. So for example I have an object here. So let Consul one and it has about four key value pairs. Now I'll make another object which is empty. So using object literal location and this object is empty. Now let's copy over all these key value pairs from console one into console too. Using before in statement. So for key in console one object I want to assign Consul tools. Key to be the same as console once key. Okay. And now we'll go ahead and check this out in the console by console dot logging the second object which is console too. And there you go. So out here you can see that we've copied over all the key value pairs from the first object which is a source object into the target object which is the console to object. And one thing to remind you about shallow copying is that in a shallow copy the source and target objects share a memory address. So that is one way to do that. Looping creates a shallow copy by copying the innumerable properties from console. One object into console to object. So let's go ahead and now change one of the properties of consul one object. So let's change this from Nintendo to something else. And out here let me go ahead and comment this out. I'll say console one 0.1. So that's the first key is equal to Sega. So it's not a Nintendo. So we've assigned the value of the property 12 Sega which replaces the value which was copied over for this property from the Consul one. Project. Consul one Story Object. So what do you think that council one will be? So if I print out the value of the object, council got council one and out here you can see that this change is reflected and we are seeing out here the new property. Okay but what if I change this Let's not change it to one but two. So console too. And one and out here you can see that the value of one has not. So the value of one did not change in the source console one object since primitive values are copied by value whereas if a field is of a reference or object type then the reference memory addresses copied over to the newly created target object. So changing the value at one location, will not change the value at another location for a property whose value is a primitive type. And this you can see out here when I do console dot log for the first object we don't see a Sega. Okay. Now another way that we can make a shallow copy of an object is by using the spread operator. So the spread operator was introduced in E S E six. So X Xmas script version six and it copies over the innumerable properties of an iterable um source object to a target object. So let's just comment this part out for now and let's take a look at only this part. So I have console one object. And now what I'm going to do is I'm going to use the spread operator which is denoted by three dots to copy over all the key value pairs from council one object into console too. And if I print out the values of console to object you should see that we have all the key value pairs copied over from console one object into console to object. So we can also use the spread operator to make a copy. Now the spread operator can also be used to merge two iterable objects. So for example let's say I have let me comment this out once again and comment this out. So let me make another object, let console two is equal to another few key value pairs. Um and this time I'll just use some other game consoles and um run so okay let's change this to five six And this is going to be seven And we have the three And then the last one is eight and we'll just have this atari. Okay, so now I have the first object which is console one and the second object which is consul to. And now what we're going to do is we're going to use the spread operator to merge them into a single object which is going to be referenced by, let's say let's merged consoles. That merged councils is equal to And out here I'll use the spread operator, console one, comma console too. And now if I go ahead and let's go ahead and console dot log merged consoles right? You should see that it contains all the key value pairs from one 28 for both the objects. So there you go. So 12345678. So we've used the spread operator to merge two objects. Now a thing to keep in mind is that duplicate keys are overridden. So if we have two keys which are of the same name, then the latter value will prevail. So for example, let's change this from five two one. Okay, so The one key is common and now what's going to happen is that the latter value will prevail? That means we will see Sega here and there you go. So we see one is Sega. We've lost the value for Nintendo since the latter value will prevail. If two keys have the same name because duplicate keys are overwritten. So this is something that you want to keep in mind that all the key value keys should be uniquely named. Now another strategy to make a shallow copy is to use the es six object dot assign method. So object dot assign method will make a shallow copy by also copying the innumerable properties from a target object to a source object. And this method it takes two arguments. It takes a target object and a source objects as arguments. So let's go ahead and try out object dot assign method and let's uh declare a variable. So let's declare a um an object. So it has a height key whose value is 100 it has a with key whose value is also 100. Now really use this object dot assign method and we can assign the properties from the box object into an empty object. So for example, we will say let box copy is equal to And out here we want to use object object dot sign method and I'm going to copy over all the properties from the box object into an empty object which is denoted by open and closed curly braces. So that's the target object. And the second argument to object dot assign method is the source object, which is box. So when I go ahead and print out box underscore copy, you will see that we've copied over the height and with keys along with their values. So properties and the values have been a shallow copied. Now we can also use object dot assign method to merge two objects. So let me go ahead And what I'll do is just comment this out for now. And I have a second box object. So box two is equal to let's say a border of 20 and it has a color key whose value is green. Right? So we have to box objects called box and box two. And we're going to be merging the properties of the two boxes using object dot assign. And one way to do this is let me go ahead and uncommon at this or no let it be. So I'll say let merge a box is equal to object dot assign method which it takes as an argument, an empty source object and then um sorry an empty target object. And then the first source object followed by the second source object. And now if I print out the key value pairs of merged underscore box object, you should see all the key value pairs which have been shallow copied from box and box two objects. So this method out here took three arguments. The first one which has this pair of curly braces, is the empty target object which has been assigned to this variable merged box and the second argue and third arguments are for the source objects. Okay, so remember that primitive values are copied by value whereas for reference value, the memory address is copied over. Right. And in a shallow copy, both the source and target objects share a reference or memory address. So let's understand this a bit more And what I'm going to do out here is in a box object, I'm going to make another key called colors, which is actually a nested object with if you key value pairs. So I'll see one is peach in a two is let's say coral. And then the third key has a value of orange. Okay, for my box objects has a height key A with key and it has a color ski, which references And a nested object of three key value pairs each assigned a string value. Right, so now let's go ahead and work on this. And what I'll do is I'll just comment this out for now. Okay, now let's say let um box copy is equal to object dot assign and an empty target object. And box. So if I go ahead and look at box copy now. So I'll just print out the key value pairs. You'll see that it has all the key value pairs including the colors key, which references in nested object with three key value pairs. Okay, so let's change the value of the height property in the box copy. So let's go ahead and change this and let me comment this out. So what I'll do is I'll say box under underscore copy got height And let's change this 200. Now if I cancel dot log box Right out here, you see that the height height key has not changed. It is still a references 100. Right, so the height property in the original box object remains unchanged even though we assigned a value of 200 to the copy that we created. And this is because primitive types are copied by value and not by reference. So changing the value of a primitive type in the target object does not affect the source object. Now to check whether the target and source objects share a memory address. We can now change the property called one from colors out here to something else. So let's go ahead and check this out and out here. I'll say box underscore copy dot colors 0.0.1 is equal to the color red. And now if we when we console dot log the box object which was the original um source object, you see that indeed the key Property or let's say the key called one from the box object has changed to red. So since memory addresses are shared and objects are copied by reference, we see that the value of property one of the nested colors object is now red instead of the original peach. Okay, so that is all about making shallow copies using object dot assign method, iterating and also merging objects again using object dot assign method and spread operator
10 Views 0 Likes 0 Comments

Let's go over making shallow copies

Comment
Leave a comment (supports markdown format)