How to Deep Copy Objects or Arrays in JavaScript
Вставка
- Опубліковано 29 вер 2024
- In today's video I'll be taking you through one of the best ways to perform a
deep clone (copy) or an array or object in JavaScript. This uses a recent function addition called "structuredClone()".
Please be way about browser compatibility which you can find down below 👇
For your reference, check this out:
developer.mozi...
developer.mozi...
THE ULTIMATE JAVASCRIPT DOM CRASH COURSE 👇
www.udemy.com/...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript
*3 OTHER WAYS TO COPY OBJECTS IN JAVASCRIPT:*
ua-cam.com/video/M9Af2RNE9xU/v-deo.html
*THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
I remember coming across this problem as a young developer many years ago when the web was newish (with not much support online) and been super confused as to what was going on, I think I ended up writing a function to deep copy the object.. now as a casual node dev this video is a great refresher, as your other videos..
Wow ! just in time as i was reading up on deep and shallow copy the video popped out
😎👍
I discovered this while reading the documentation for web workers and I didn't get why this wasn't a public api, but it's nice to know that's changed now
Hi mate,
Thanks for the content.
I´ve got this error message while using structuredClone: "ReferenceError: structuredClone is not defined"
How to tackle it ? Thanks in advance.
As far as I know, structuredClone() is a part of DOM API and not JS. So, while JS console yields a reference error, your browser's console should be able to show the cloned object and related statements. At least that's how I circumvented the issue.
It this function work for object methods also?
A HUGE DISLIKE. ADD GET METHOD TO AN OBJECT AND YOU'LL SEE
in my commuting time, I have been watched your channel everyday on the subway. thank you so much. your video is very helpful to me.
That's awesome!
Thank you very much for the explanation. It's such a shame JS is so counter intuitive in this matter... Well, there's no perfect language
🙏🙏🙏👍👍👍👍👍👍🖖🖖🖖🖖🖖
Thank you very much ! It was helpful
hi dcode can you do auto indent inside contenteditable?
Great tutorial!
I don't understand why it's false when you didn't even modify the original object yet. I understand that it's false when you add the 4th element to the array, but why is it false before? They're not the same, but they're identical
Hey, value comparisons as you're describing them only work on primitive values or similar (e.g. you compare 2 strings and if they're the same you get TRUE)
When comparing complex things like arrays or objects, it will instead compare via the "reference" (in other words, are these 2 the same object)
Comparing only works on normal types like numbers and stuff, comparing object is another story
If you've familiar with low level programming then comparing two objects is basically comparing two pointers, pointing to different area on the heap that stores the object, despite the value is the same, but they both live on different places
In other words: when the objects share the same pointer (or "reference", a 64 bit value (ADDRESS) pointing to (or rather contains) ANOTHER ADDRESS in memory where the ACTUAL values are stored) each change in the original will change the copy as well - and vice versa. The actual values are stored at the the same memory location
On the other hand when you "deep clone" NEW memory is allocated to store the actual values and your variable now contain the NEW reference to the "new" copy.
This mechanism may appear weird for a high-level language like javascript for devs with no experience in low-level languages like Assembly or C where dealing with pointers/ references is part of the day job. But javascript (or rather its runtime engines like V8) have a very good reason to stick to this "classic" machine level programming paradigm: memory management / garbage collection
You'd be surprised how fast you could run out of 64GB of memory in any non-trivial program when the (V8) engine would allocate (global) memory for every "var / let / const" you define in your program. In Dev tools you could monitor that in your Heap Size.
So yeah..it' may be a pain in the butt to get your head around it but it's there for a good reason...It protects you from running out of memory...even in 4MB machines.
HTH,
Ed
Feel free to respond if there's anything you do not understand. My background is in machine level (assembly) programming in a time when it was the only available option...
@@montebont
Thank you for the explanation, really helpful.
why you dont just stringyfy the object and then parse it??? i tried it and the copy wasnt a reference anymore.