What this blog will explain?
- Difference between Deep copy and Shallow copy
- How to deep copy and shallow copy
When it comes to cloning objects in JavaScript, there are two main methods: shallow cloning and deep cloning.
Shallow cloning is when you create a new object and copy over the top-level properties from the original object. This is a quick way to create a new object with some of the same properties as the original object.
Deep cloning is when you create a new object and copy over all of the properties from the original object, including any nested objects and their properties. This is a more thorough way to clone an object, but it can also be more time-consuming.
Here are some examples of shallow and deep cloning in JavaScript:
Shallow clone example:
var originalObj = {
prop1: "value1",
prop2: "value2",
nestedObj: {
nestedProp1: "nestedValue1",
nestedProp2: "nestedValue2"
}
};
var shallowClone = {};
for (var prop in originalObj) {
shallowClone[prop] = originalObj[prop];
}
console.log(shallowClone); // { prop1: 'value1', prop2: 'value2', nestedObj: { nestedProp1: 'nestedValue1', nestedProp2: 'nestedValue2' } }
In this example, we use a for-in loop to iterate over the properties in the original object. For each property, we add it to the new object with the same value.
Notice that the nested object is copied by reference, not by value. This means that if we were to change a nested property in the shallow clone, it would also change in the original object:
shallowClone.nestedObj.nestedProp1 = "newNestedValue1";
console.log(originalObj.nestedObj.nestedProp1); // "newNestedValue1"
Deep clone example:
var originalObj = {
prop1: "value1",
prop2: "value2",
nestedObj: {
nestedProp1: "nestedValue1",
nestedProp2: "nestedValue2"
}
};
function deepClone(obj) {
var clone = {};
for (var prop in obj) {
if (typeof obj[prop] === "object") {
clone[prop] = deepClone(obj[prop]);
} else {
clone[prop] = obj[prop];
}
}
return clone;
}
var deepCloneObj = deepClone(originalObj);
console.log(deepCloneObj); // { prop1: 'value1', prop2: 'value2', nestedObj: { nestedProp1: 'nestedValue1', nestedProp2: 'nestedValue2' } }
In this example, we use a recursive function to iterate over the properties in the original object. For each property, we check to see if it's an object. If it is, we call the deepClone function again on that property. If it's not an object, we just add it to the new object with the same value.
Notice that the nested object is copied by value, not by reference. This means that if we were to change a nested property in the deep clone, it would not change in the original object:
deepCloneObj.nestedObj.nestedProp1 = "newNestedValue1";
console.log(originalObj.nestedObj.nestedProp1); // "nestedValue1"
There are a few different ways to clone an object in JavaScript, but the two main methods are shallow cloning and deep cloning.
Shallow cloning is when you create a new object and copy over the top-level properties from the original object. This is a quick way to create a new object with some of the same properties as the original object.
Deep cloning is when you create a new object and copy over all of the properties from the original object, including any nested objects and their properties. This is a more thorough way to clone an object, but it can also be more time-consuming.
Hope this helped you understand this better.
Top comments (1)
Deep cloning has been supported natively in most browsers for some time -
structuredClone