Hey!, Since I started working on VueJs I have been learning new things from a big codebase. I hope I'll continue to share my learnings over here.
Have you ever tried to copy an object in JavaScrip...
Gurpreet Kait
Author
Hey!, Since I started working on VueJs I have been learning new things from a big codebase. I hope I'll continue to share my learnings over here.
Have you ever tried to copy an object in JavaScript and discovered that changing the copy also changes the original? That’s because you made a shallow copy. Sometimes, you need a deep copy, and that's where cloneDeep from Lodash comes in handy
http://localhost/storage/uploads/clone-deep-in-javascript-lodash-library-1024x576.png alt="clone deep in javascript lodash library" class="wp-image-1249"/>
What is cloneDeep?
In short, cloneDeep is a function from Lodash, a cool JavaScript library, that allows you to copy objects without affecting the original state.
Why Do We Need cloneDeep ?
If you only make a shallow copy, the inner objects still point to the same place in memory. So, changes to the copy will affect the original. Deep copying avoids this problem.
Shallow Copy (as mentioned below in the code snippet)
Performance: Deep copying can be slow for huge objects.
Circular References: cloneDeep handles circular references, but be aware of your data structure to avoid complexity.
Conclusion
cloneDeep is a lifesaver when you need a full, independent copy of an object in JavaScript. It’s easy to use and helps avoid many headaches with state management and data manipulation. Happy Coding! 😉