Тёмный

How to Deep Copy Objects or Arrays in JavaScript 

dcode
Подписаться 135 тыс.
Просмотров 11 тыс.
50% 1

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

Опубликовано:

 

5 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 21   
@dcode-software
@dcode-software 2 года назад
*3 OTHER WAYS TO COPY OBJECTS IN JAVASCRIPT:* ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-M9Af2RNE9xU.html *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇 www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
@RossBobby
@RossBobby 2 года назад
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..
@Daniel_WR_Hart
@Daniel_WR_Hart 2 года назад
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
@kennzuki8113
@kennzuki8113 2 года назад
Wow ! just in time as i was reading up on deep and shallow copy the video popped out
@dcode-software
@dcode-software 2 года назад
😎👍
@s2유아마에브리띵
@s2유아마에브리띵 2 года назад
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.
@dcode-software
@dcode-software 2 года назад
That's awesome!
@rose-marlinesidney4896
@rose-marlinesidney4896 Год назад
Thank you very much ! It was helpful
@stevejisha
@stevejisha 6 месяцев назад
It this function work for object methods also?
@MegaZeeeh
@MegaZeeeh Год назад
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
@centralbiz5974
@centralbiz5974 2 года назад
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.
@meraklmuskulpesent8313
@meraklmuskulpesent8313 Год назад
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.
@pineapplecodebeginner555
@pineapplecodebeginner555 2 года назад
hi dcode can you do auto indent inside contenteditable?
@frankdrolet9439
@frankdrolet9439 2 года назад
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
@dcode-software
@dcode-software 2 года назад
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)
@vintagewander
@vintagewander 2 года назад
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
@montebont
@montebont 2 года назад
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...
@abdulazeez.98
@abdulazeez.98 Год назад
@@montebont Thank you for the explanation, really helpful.
@suelingsusu1339
@suelingsusu1339 2 года назад
🙏🙏🙏👍👍👍👍👍👍🖖🖖🖖🖖🖖
@bilal6855
@bilal6855 Год назад
why you dont just stringyfy the object and then parse it??? i tried it and the copy wasnt a reference anymore.
@tnsaturday
@tnsaturday 10 месяцев назад
A HUGE DISLIKE. ADD GET METHOD TO AN OBJECT AND YOU'LL SEE
Далее
5 Real Life Examples of Array Reduce in JavaScript
12:47
Common JavaScript Mistakes and How to Avoid Them
18:48
12 Things Every JavaScript Developer Should Know
14:29