About Lesson
Q1. What is the difference between deep copy and shallow copy? What are different ways to copy object in Javascript ? Follow up Given an object create a function which deep clones the object
Ans:
In JavaScript, the concepts of deep copy and shallow copy refer to the methods of copying objects and arrays. Here’s a detailed explanation of both, including their differences:
Shallow Copy
A shallow copy of an object or array is a copy where only the first level of the object or array is copied. If the object or array contains other objects or arrays as properties or elements, the references to those nested objects or arrays are copied, not the objects or arrays themselves. This means that changes to nested objects or arrays in the copied object will also reflect in the original object, and vice versa.
Example of Shallow Copy
- Using Object.assign() for Objects
const originalObj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, originalObj);
shallowCopy.b.c = 3;
console.log(originalObj.b.c); // Output: 3 (because it’s the same reference)
2. Using the Spread Operator for Objects
const originalObj = { a: 1, b: { c: 2 } };
const shallowCopy = { …originalObj };
3. Using the Spread Operator for Arrays
const originalArr = [1, [2, 3]];
const shallowCopy = […originalArr];
shallowCopy[1][0] = 4;console.log(originalArr[1][0]); // Output: 4 (because it’s the same reference)
Deep Copy
A deep copy of an object or array means that all levels of the object or array are copied. If the object or array contains other objects or arrays as properties or elements, those nested objects or arrays are also copied recursively. This means that changes to nested objects or arrays in the copied object will not affect the original object, and vice versa.
Example of Deep Copy
1. Using JSON.parse and JSON.stringify
const originalObj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObj));
deepCopy.b.c = 3;
console.log(originalObj.b.c); // Output: 2 (because it’s a different object)
deepCopy.b.c = 3;
console.log(originalObj.b.c); // Output: 2 (because it’s a different object)
Note: This method has limitations. It does not handle functions, undefined, Infinity, NaN, and circular references.
2. Using a Recursive Function
function deepCopy(obj) {
if (obj === null || typeof obj !== ‘object’) {
return obj;
}
if (Array.isArray(obj)) {
const arrCopy = [];
for (let item of obj) {
arrCopy.push(deepCopy(item));
}
return arrCopy;
}
const objCopy = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
objCopy[key] = deepCopy(obj[key]);
}
}
return objCopy;
}
const originalObj = { a: 1, b: { c: 2 } };
const deepCopyObj = deepCopy(originalObj);
deepCopyObj.b.c = 3;
console.log(originalObj.b.c); // Output: 2 (because it’s a different object)
Differences
1. Level of Copying:
- Shallow Copy: Only the first level is copied, deeper levels are referenced.
- Deep Copy: All levels are recursively copied.
2. Mutability:
- Shallow Copy: Changes to nested objects/arrays in the copy affect the original.
- Deep Copy: Changes to nested objects/arrays in the copy do not affect the original.
3. Performance:
- Shallow Copy: Faster as it copies only the top level.
- Deep Copy: Slower due to the recursive copying of all levels.
