How to Deep Copy Objects or Arrays in JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 พ.ย. 2024

ความคิดเห็น • 22

  • @dcode-software
    @dcode-software  2 ปีที่แล้ว +2

    *3 OTHER WAYS TO COPY OBJECTS IN JAVASCRIPT:*
    th-cam.com/video/M9Af2RNE9xU/w-d-xo.html
    *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇
    www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

  • @RossBobby
    @RossBobby 2 ปีที่แล้ว +6

    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 ปีที่แล้ว +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

  • @s2유아마에브리띵
    @s2유아마에브리띵 2 ปีที่แล้ว +1

    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.

  • @kennzuki8113
    @kennzuki8113 2 ปีที่แล้ว +5

    Wow ! just in time as i was reading up on deep and shallow copy the video popped out

  • @rajattripathi5796
    @rajattripathi5796 หลายเดือนก่อน

    Thankyou very much , it was very easier to understand deep copy

  • @rose-marlinesidney4896
    @rose-marlinesidney4896 ปีที่แล้ว

    Thank you very much ! It was helpful

  • @stevejisha
    @stevejisha 8 หลายเดือนก่อน

    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 ปีที่แล้ว +1

    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 2 ปีที่แล้ว

      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 ปีที่แล้ว +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 ปีที่แล้ว +5

      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 ปีที่แล้ว +3

      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 ปีที่แล้ว +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 2 ปีที่แล้ว

      @@montebont
      Thank you for the explanation, really helpful.

  • @bilal6855
    @bilal6855 ปีที่แล้ว

    why you dont just stringyfy the object and then parse it??? i tried it and the copy wasnt a reference anymore.

  • @suelingsusu1339
    @suelingsusu1339 2 ปีที่แล้ว +1

    🙏🙏🙏👍👍👍👍👍👍🖖🖖🖖🖖🖖

  • @tnsaturday
    @tnsaturday ปีที่แล้ว

    A HUGE DISLIKE. ADD GET METHOD TO AN OBJECT AND YOU'LL SEE