Javascript Array and Object Cloning: Shallow or Deep?

Should you clone objects and arrays shallow or deep? What is the difference and when does it matter? Let's dig into Javascript Array and Object cloning so that we can learn once and for all, why and when to use deep or shallow cloning.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

0:00 Introduction
0:30 What does Cloning?
1:41 Primitive Values Copy
2:23 Array and Objects Clone
3:43 Shallow Cloning
4:16 Deep Cloning
6:31 Speed Comparision
7:15 Recommendations
8:00 Outroduction

[FuDiep]

Babe wake up, the absolute GOAT came out with a new video

[JohnFarrellDev]

I just learnt about structuredClone, thank you very much!

Nice to remove a dependency.

[estebanordonez]

I come back to this video every now and then lol it is so good!
I failed my first interview over this subject.... not even 10 minutes in and it was over when I said arrays and objects were going as value and not as reference. Ha ha oh well we learned from out mistakes.

[Tomzablade]

This is great Jack, thanks a lot! I was mildly aware of deep vs shallow copies/clones but seeing the different use cases, and performance benchmarks is really helpful

[OdradasMarch]

This type content is very rare in Youtube. To validate your statement and teaching with real experiment where everything is clear cut like Black and White not gray.

I love this approach of teaching.❤🧡💛💚💙💜

[tanercoder]

Your Illustratuons were amazing and to the point for those of us visual types 😊

[oscargm]

Amazing, amazing and amazing again. Clear and concise

[ElevateCode]

Excellent video. Clear explanation, great examples, audio and video are very clear. Thank you so much for putting this together!

Great!! Best explanation ever!! If we wonder there's a risk changing the original values of array/object maybe there we need deep copy.

[victorlongon]

great video Jack! I started using structuredClone quite a lot. I feel that is depends on the kind of applications you build to shallow vs deep copy.

[bill_codes]

Great video I never actually gave it too much thought in js and was excited to see the test results. I typically just create new objects and use the spread operator syntax but structuredClone looks like it could be useful too.

[Cahnisama]

I had to solve a bug the other day because I didn't understand I was doing a shallow copy with the spread, and unwittingly i was mutating the original object. This stuff is super important

[jensadria]

At 0:36 I thought I was watching the movie "Honey, I Shrunk the Software Developer"

[pov_stevo]

I just asked chatgpt this a day or two ago, you explained it a lot better. Thank you Jack

[yogeshvanzara]

Back to back quality content ❤ .

can you make on vedio on "this" if possible it's confusing with normal fuction and arrow function and lot more with this?.

[kettenbach]

I wonder how many likes get missed. Often at the end of a video while I'm watching on my smart TV, it will show thumbnails of other videos. This is when we get reminded to like the video, but at that point you can't like it because pressing up no longer shows the thumbs, but only navigates to the thumbnail. Basically i had to go on my phone in the history and like the video. I wish YouTube could do better in this case.

[deathone]

Shallow when you can, deep when you have to. If it is straight from the API you should do a deep with verification/modifications anyways.
StructuredClone vs JSON.parse/stringfy is not only about performance and Dates. StructuredClone is Chrome 98 and 2022+ browsers roughly. This most likely does not matter for your personal projects, but need to think about it for Enterprise software. Also can target older versions of ES if needed in package.json.

[andrewbrowne]

I know you kept it to built-in methods, but a video about tools like immer would be really cool

[pw.]

Wow! Amazing how the 'optimised' code written by the JS team is way slower than a double conversion!

[epochederfreiheit]

Jack Herrington is a legend. Simple as that.