Create a Copy of an Object in JavaScript
In this lesson, we'll go over two popular ways to create a copy of an object in JavaScript: Object.assign and using the spread operator. We'll also go over why using these are important, since JavaScript passes object values by reference. Finally, we'll go over nested objects, and why methods such as Lodash's cloneDeep are necessary.
Mark Foster: [0:00] Here we have a simple JavaScript object and we want to make a clone or a copy of it. Now at first glance, you might think we can do something like this.
[0:08] We'll declare a user2 set it to user1. This approach works with things like strings and numbers, and if we take a look at our output, it appears at first glance it work with our object as well.
[0:20] Let's take a look at what happens if we update the name property of just one of our users. As you can see, both objects update. What's happening here?
[0:32] JavaScript treats objects as references. On line six, we did not create a second object. We simply pointed both of these variables toward the same object in memory. When we update the name property to Mark, that gets reflected when we log both of our user1 and user2 variables.
[0:51] We need a different way to create an actual copy of our object. The first method we're going to take a look at is Object.assign. Object.assign takes two or more arguments and the first is called the target parameter. You can think of this as the starting point, what object should we start with.
[1:09] For our example, we're going to start with an empty object. Then you can pass in as many other objects as you want and all their properties will be added to the target starting point parameter.
[1:20] We'll pass in user1. We're going to assign this whole thing to user2 and let's take a look at the output.
[1:26] We can already see that this is working differently than before. Updating the name property of user1 only updated our user1 object. We can see that we did actually create an independent copy of our object.
[1:39] Then next, even simpler way to create a copy of our object is use the spread operator. We'll set user2 equal to a new empty object and then we'll spread in the properties of user1. If we save and take a look at the output, we'll see once again we've got our independent copy where only the name of user1 was updated.
[2:00] With both the spread operator and object.assign, there is a major point to be aware of. That's that both of these methods do is called a shallow copy. They only clone one level deep.
[2:11] Let's add a nested object to user1 and along with updating the name, let's update the social.twitter. If you take a look at our output, you'll see we've got our original problem going on again. Our nested objects are references, so they're both reflecting the changes that we're supposed to just apply to user1.
[2:32] If you need to make a clone of an object that could potentially be multiple-levels deep, you'll need to reach for something such as the cloneDeep method in Lodash. For the typical single-level object, using the spread operator or Object.assign() is a great way to create a copy of an object in JavaScript.