If you already have a subscription, you can sign in.
Enjoy free content straight from your inbox 💌
00:00
As we know, JavaScript object assignments work by using references. This means that cloning of objects cannot be done by using simple assignment. Let's demonstrate that by creating a simple object containing the name property pointing to the string. John, if you try to create a copy by simply assigning it to a different variable, it'll actually be a reference to the same object. So if you modify any properties on the copy, we are essentially modifying the original object, and we can verify this by executing this simple piece of code. A simple way to create a shallow copy is by using a feature
00:34
that we've already looked at, which is the spread operator. So we create a new object for the copy by spreading in the existing John object. And now if you modify this copy, of course the copy property will be changed, but the original John object will be left intact. Note that the spread operator does not create a deep copy. So if our original object contains nested objects, for example, name here is an object by itself. Even if you create a copy of John using the spread operator, the nested object is not going to be cloned and will continue to refer to the original john.name.
01:09
So if you modify the properties of copy.name, john.name being the same object is what is going to get modified. One trick that developers have traditionally used to create a deep copy is by serializing that object into adjacent string and then des serializing that string into a new object. So our object contains nested objects, for example, john.name as an object by itself. And this time we create the copy by first using json dot string I to serialize the object to a string, and then parsing that string using json dot parse to create a new object. Now, when we modify the nested object within the copy,
01:45
only the copy is going to get modified, but the original John object is going to remain intact, and we can verify that by executing this code. But using json serialization means that we cannot clone things whose types are not preserved in JSON format. For example, dates, maps, and sets. So we start off with an object that has a date of birth property, which is of type date, and we create a copy by using json dot stringier, followed by Jason Pass. Because the day type is not preserved over J serialization, we essentially end up with the date
02:17
of birth property being a string. Fortunately, j serialization for cloning is not a trick that you need to remember anymore because modern JavaScript has a built-in method called structured clone. We pass in the object that we want to copy into structured clone, and it creates a new cloned copy. If you modified even nested properties of the copy, only the object in the copy is going to get modified. The original object will remain intact. Additionally, within the copy, the types are preserved as well. For example, maps and sets will copy around just fine.
02:51
And similarly, date is going to continue to be a date. One thing to note is that structured clone only works for properties, and you can think of it As a clone for the structure of the original object. It doesn't clone custom functions that might be present on the object. This is because methods in JavaScript can reference external variables. So if you want to clone objects with custom functions, it is best to create them manually.