Experimenting with Javascript Objects (Part 2)
Comparing and copying Javascript Objects
Copying Objects
As we said in the previous article, Javascript Objects are just references to the underlying data, this means that when you assign an object to multiple variables, all variables will hold the reference to the same underlying object.
Both variables change when you mutate one of them, and their comparison returns true, that’s because both variables actually reference the same underlying object.
One thing you can do to prevent this is doing a shallow/deep copy of the object but keep in mind that a shallow copy only copies first-level keys and a deep copy is very (relatively) slow.
Shallow Copy
Let’s see an example that leverages the javascript spread operator to create a shallow copy of an object.
As you can see hi: "mom" did not change because it’s a first-level key, whereas someone.else did change because it’s a nested key.
Instead of the spread operator, you could have also used the more verbose Object.assign function.
Deep Copy
Deep copies are a bit more complex. A lot of people suggest doing
JSON.parse(JSON.stringify(myObject))but I heavily discourage using that because it could and will probably cause issues in your code. Let’s look at the following example:
As you can see from the results, some values are lost during this operation, this happens because not all javascript types are serializable by JSON.stringify .
If you need to deeply copy an object, your best bet is to implement a deep-copy function yourself like:
As you can see from the results
> {hi: "mom", something: undefined, changeHi: ƒ}
> {hi: "medium", something: undefined, changeHi: ƒ}all the values are maintained through the copy and changes to one object do not affect the other object.
The above clone function is not exhaustive and is just a proof of concept, it does not handle the deep copy of Date , RegExp and other things!
Comparing Objects
Objects comparison is a somewhat complex topic among beginners, but it’s actually quite easy, let’s try to break it down.
As we previously said, objects are just references, and this is extremely important when you compare them.
When you create an instance of an object, it will be equal to nothing but itself, this happens because every object is a reference to the underlying data so when you compare two different objects, you are actually comparing their references which will obviously be different. Let’s see an example:
As you can see from the results, no matter how you compare them, they are just different objects. This is actually a behavior that can be exploited for some very interesting use-cases which we will explore in the next articles.
If you intend to compare the content of two objects, you can shallow/deep compare them.
Shallow Comparison
Shallow comparison only compares first-level keys and it’s a fundamental concept behind many frontend libraries like React. Let’s see an example of shallow comparison:
As we can see from the results, the two objects are equal as long as all their first-level keys are equal. As soon as we add another nested object the shallow comparison will fail because myFirstObject.nested and mySecondObject.nested have two different references.
Deep Comparison
Deep comparison is a lot slower and recursively compares all the nested keys, it might be useful if we need to ensure that two objects have the same values, even nested ones.
As you can see from the results, even nested comparisons now will be evaluated.
Conclusion
For a more in-depth reference, please take a look at this link.
