Shallow Merge Two Objects in JavaScript
This lesson looks at three methods that can be used to shallow merge two objects in javascript: Object.assign, both with mutating the original object and without mutation, and the spread operator.
It also covers the potential danger of doing a shallow merge instead of a deep merge, by showing an example of merging two objects that have objects as values, instead of simple strings.
Instructor: [00:00] Let's make an object here with some information about a person. We'll call them Joe, say he's 23 years old, and let's say his favorite color is green. Then sometime later in our application we get an update. Maybe this comes in on an AJAX request and we learn that Joe's favorite book is "Harry Potter," and his favorite color is actually blue and not green.
[00:24] What we want to do is merge this update into the person object. The first way we'll do that is with an ES6 method called Object.assign. If you aren't working in an environment with ES6 yet, then there's a polyfill available for Object.assign.
[00:39] We'll pass to Object.assign the person first and then the object to merge, which is the update. If we log the value of the merge object then we can see that the favorite book was assigned correctly and the original favorite color of green was replaced by the new favorite color of blue.
[00:56] We need to watch out though because Object.assign actually changes the values inside the person object. If we log person here, we can see that that object is actually changed. We can even compare the person object with a new merged object with the Object.is method and see that the merged object and the person object are really just the same thing.
[01:20] This may be what we want to do, but quite often you'll actually want to make a brand-new object and copy all the values into the new object. Instead for our Object.assign call, let's change the first value that we pass in to be a brand-new empty object.
[01:35] When we run that, we can see that the value of merged has all the proper values from person and then from update and that the values and the person object haven't changed from the original.
[01:47] If we happen to switch the order of the person and the update objects in the Object.assign call, then what we see is that the values from update are applied to the new object first, then the values from person are applied.
[02:00] Any keys that were already there, which is this color key, are overwritten. The green color from the person object has overwritten the blue color from the update object. Just make sure that the order that you apply the objects is the order that you want to overwrite the values in the new object.
[02:16] Starting in ES2018, there's a new syntax we can use to shallow copy objects, which is the spread operator. Instead of Object.assign now, we first make a brand-new object and assign it to the merged variable.
[02:30] Then we'll spread over person first, and then spread over update second. This has the same effect for these objects as the Object.assign line that we just had. The person object keys are applied to the new object followed by the update keys, which overwrites the color from person with a new color that was an update.
[02:50] Lastly, remember that this is only for shallow merging the update into the person. To see this in action, if we changed the name key to be an object with a first name in the person object and then just a last name in the update object, then when we merge the two we only see the final value for the name key, which is an object with only the last name.
[03:12] That's because the original name object in person is completely overwritten by the name object in the update. What you probably want to do in this case instead is to deep merge those objects, which neither the assign method nor the simple spread operator will do for you.
[03:27] Another way to see that this is a shallow copy only is to extract the name completely into a new object. If we run that, we do see the name in the merged object, but later, if we go back and change the values inside the original name object, then the values change inside of the merged object as well.
[03:48] Only use Object.assign and spread operators for shallow copies, that is copying objects that don't contain other objects or arrays. Or just plan for and expect that objects and arrays will be added by reference to the merge object.