ES6 React - What are the difference between reference, shallow copy and deep copy and how to compare them?

Question

I know this question has been discussed so many times, and I think I got a basic idea. There are some top rated answers I found from StackOverflow:

• What is t

Answer 1

A shallow copy of an object (or array) is a separate object with a matching set of property names and property values.

After making a shallow copy, a comparison on a property-by-property basis of the two objects (the original and the copy) will show all property values being ===.

For example:

let o1 = { a: 1, b: 2, c: { x: "hello", y: "world" } };
let o2 = {};
Object.keys(o1).forEach(propertyName => o2[propertyName] = o1[propertyName]);

Now if the property values of o1 and o2 are compared, they are of course ===. In particular, property "c" of both objects will be a reference to that sub-object with "x" and "y" property names. However, comparing o1 and o2 with either == or === will not show equality, because two distinct objects are never == to each other regardless of their contents.

A deep copy of an object is one where every object-valued property of the source is recursively deep-copied into the destination copy. Because new object values are of necessity created for the deep-copy target, those property values will not compare as ===, because no two distinct objects can be ===.

Making deep copies in a language like JavaScript can be problematic because the "graph" of references from property values can be circular, and because some property values may be functions. Generally a deep copy method has to make some assumptions on an application by application basis.

In my experience, the need to make a deep copy of an object is quite rare compared to making shallow copies.

Now, all that aside, comparison between two object references as in your bit of React code:

shouldComponentUpdate(nextProps) {
  return this.props.children !== nextProps.children;
}

has nothing to do with shallow or deep copies. That's a single comparison between two object properties, both named "children". The objects referenced by this.props and nextProps may be different objects or they may be the same object, and one may be a shallow or deep copy of the other, but that makes no difference for that comparison statement: all that's doing is comparing the two particular "children" property values for strict inequality. (It's true that if nextProps happens to be a shallow copy of this.props, or vice-versa, that !== comparison would be false, but the comparison doesn't have to know about the prior history of the two objects; it's just a single comparison of two values.)

Answer 2

Let's consider the example below

clone and clone2 are shallow, only properties of original object are affected. clone3 and clone4 are deep.

However if the spread operator only creates deep copy sometimes, then how can I test if the new object is a deep copy or not?

It creates deep copy in case of clone4 - as long as the depth is controlled by a developer. Generally there's no need to test if an object is deep copy or just different in React, because this check is expensive and requires to traverse nested objects in both compared objects and compare them property by property.

Performance is the reason why React relies on immutability. If a new value isn't === equal, it's considered a different value.

So james is a shallow copy in Facebook's code.

It isn't. It's a reference that was assigned to another variable. It's still same object.

Are reference and shallow copy exactly the same thing in JS?

A reference isn't a copy. So it isn't shallow copy, too.

I commented NBAChampion out in clone4, so now NBAChampion is a reference rather than copy! If I push a new value in user.highlights.NBAChampion, clone4 will also updates. What should we call this type of object? It's neither a shallow nor deep copy.

It's just a copy. It doesn't have specific name, because there's rarely a need to do such selective copies. If the intention is to make it act like deep copy, it should be called a mistake.