Shallow copy / deep copy / complete deep copy with lodash cloneDeep()

This covers how to do a shallow copy, a deep copy, and a complete deep copy.

First, a shallow copy example.

The object1 object holds a name, an age, foods from around the world, and a function.

Here, object2 is assigned object1. Comparing the objects with the strict equality operator ('===') prints true. That is because they point to the same address.

So when object2.food.us is changed to buger below, the element in the original object, object1, changes too.

This is what a Shallow Copy is.

Next, I tried a regular deep copy.

I copied object1 into object3 with the ...(spread) operator.

Then I changed name, a 1 depth element of object3, to 정우성.

The result was a deepCopy where the name in the original object, object1, didn't change.

But there is a problem here.

When you do a deepCopy with the spread operator and then change an element at 2 depth, that is, an element of an object inside the object, the original object changes as well.

I looked for a way to solve this problem.

Solving it was very easy.

First, you need to install lodash.

1 npm install lodash

After that, if you copy the object with cloneDeep() from the lodash module and then change a value, you can see that the original element doesn't change, even when you change an element at 2 depth.

Comparing them with the strict equality operator also prints false.