As JavaScript developers, we most often than not come across a situation where we want to clone an object and reuse it to perform some operations.
And we usually follow well-known approaches to deep clone the object:-
lodash's cloneDeep method
JSON.parse(JSON.stringify(object))
What if I say that you are not supposed to use the above two approaches and you should create your custom method to deep clone the object?
I have an answer for that. Let's write a utility method that would help us in achieving the deep cloning of an object.
Example
Let us say that I have a nested object as below
let emptyStack = {
feTools: 'JS, React, NextJS, Tailwindcss, Netlify',
react: {
baseConcepts: 'props, states, hooks',
advancedConcepts: {
hoc: 'composition of the functions',
contextApi: 'Sharing the data without prop drilling'
}
}
}
So in the above, as you can see we have the nested objects inside emptyStack
. Let us try to understand and evaluate what all steps are required to be executed to achieve the deep cloning of an object.
Pseudo code
Steps:
- Initialize a new empty object
- Iterate over the keys of an object and check if the key-value pair is an object
- And based on the result of Step#2 update the empty object with the new properties.
- Repeat the Step#2 and #3 till the last element of an object is evaluated.
The ultimate utility method
function deepCopy(currentObj) {
let newObj = Array.isArray(currentObj) ? [] : {}; //Step#1
for (let key in currentObj) { //Step#2
let property = currentObj[key];
if (typeof property === "object") {
newObj[key] = deepCopy(property); //Step#3
} else {
newObj[key] = property; //Step#3
}
}
return newObj;
}
Usage
let deepClonedObject = deepCopy(emptyStack)
console.log(`${JSON.stringify(deepClonedObject)}`)
/** Output
{"feTools":"JS, React, NextJS, Tailwindcss, Netlify","react":{"baseConcepts":"props, states, hooks","advancedConcepts":{"hoc":"composition of the functions","contextApi":"Sharing the data without prop drilling"}}} */
What all concepts are used in the above method?
- Recursive function
- Object keys iteration
Conclusion
Deep cloning an object is really useful in the scenarios where you want the back referencing to happen for a cloned object.
There are more posts on the way related to the lists...So keep reading.
Thanks in advance for reading this article...π
I am more than happy to connect with you on
You can also find me on
Top comments (0)