cloneDeep are necessary.
[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: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.
how do you configure the right side tab to auto update the console.log output
For this video, I had the terminal set up on the right side running a
nodemon instance of my
index.js file. By default
nodemon watches the file and reruns it when the file changes (upon save). Works pretty well for this use case!