5.9 Cloning an Object

In the last video, you learned how to enumerate the properties of an object. Now, using this technique, we can get all the properties of an object and copy them into another object. So let's say you want to create another circle object, which is a copy of an object here. I'll call it another. So, constant of another. initially, we set it to an empty object, we can now use the for in loop to go through all the properties of an object and copy them into this new object. So, for(let key in circle) we now use the bracketed notation to access a property with a given key. So we put another key on the key circle. So basically here in the first iteration, the key will be radius, so this code will be equivalent to this => Another of radius , so we set the radius property of another object on the Circle of radius, now here on the right side of the assignment operator, you read the radius property of the circle, the value of that property is 1, so we get 1 and put it in the radius property of the other object. Let's do a console log of another, save the changes, so here we have this radius property set to 1, and this is our draw method, so if we call another point draw everything works as expected. But this approach to copying or cloning an object is a bit old. In modern JavaScript we have better ways to achieve the same thing. One way is to use the method object. Assign method. Let me show you this in detail. So I'm going to comment out these few lines, we have this object that we saw before, this object has a method called assign. Here as the first argument, we can pass a target object which can be an empty object, or an existing object, you'll see the difference in a moment. And then we can pass 1 or more source objects. We'll put Circle here. What this method does is it takes all the properties of this method in the source object and copies them into this new object, and finally returns the result here. So this line of code is exactly equivalent to these three lines. If we save the changes, we get exactly the same result. Now, this target object passage here doesn't have to be an empty object, it can be an existing object, it can have one or more properties or methods, so as an example, let's add a color property here, We'll set it to yellow, now save the changes, so, this new object has the color property that we originally had here, as well as the members of the circle object. So this is the object method. assign. Now let me go back to an empty object, I'll show you another simpler and more elegant way to clone an object. We can use the spread operator, so again constant from another, here we define that on a new object, then use the spread operator, which is three points, to extend the circle object. This operator takes all the properties and methods of that object and puts them here in these braces. So this is the easiest way to clone an object. Save the changes, again, we get exactly the same object as before. So here's what I want you to take away, object. assign copies the properties and methods of one or more source objects into a target object, and we can use it to clone an object, or combine multiple objects into one object, and the spread operator is used to spread an object, which essentially means getting all of its properties and methods and putting them into another object. That's it for this video on how to clone an object in JavaScript, we'll see you in a very next video