Shallow Copy and Deep Copy | Advanced Javascript Tutorial

[@DaveGrayTeachesCode]

Knowing the difference between shallow copies and deep copies of structural data is foundational knowledge for coding pure functions. In this advanced Javascript tutorial, you will learn about primitive vs structural data, passing values vs passing references, mutable vs immutable data, and how to make both shallow and deep copies of structural data. If you are just starting to learn Javascript, I recommend starting with my 8 hour full course tutorial here: kzbin.info/www/bejne/e5eknWyYrN-JkM0

[@prudhvichinnam1488]

Why these guy didn't get views please support him we love davegray

[@DaveGrayTeachesCode]

Thank you for the support! 🙏💯

[@rockfox5]

Dave, you are an amazing teacher. I have built an entire ePOS system on my own while studying how to program. Your tutorials on Node and express helped me a lot on building my backend server. Your teaching are on point and easy to understand. I’m buying you a coffee. Thank you brother

[@DaveGrayTeachesCode]

Thank you for the great feedback! I'm glad I have help you, and thank you for the support!

[@aileenchan3741]

Dave, you shared so much important information here! Thank you so much!!! This is essential to pass any technical interview and I'm super thankful for this video!

[@DaveGrayTeachesCode]

You're very welcome! 💯

[@nagaistark]

Your videos are the ones that take the longest to understand, but also the ones that are the most informative.

[@DaveGrayTeachesCode]

I'm glad they help 💯🙏

[@moeibrahim6545]

Man this is one of my favorite js channels

[@DaveGrayTeachesCode]

Thank you, Moe! 💯🙏

[@KentaroxKondo]

I had been struggling with some problems in my project literally for days, but thanks to this video, I managed to find a solution. Thank you sooo much for setting me free! 😂

[@belafekete3125]

Great video again. This is the best explanation of shallow vs deep copy in javascript. Thanks for sharing your knowledge!

[@devworks8787]

For many years I understood shallow and deep copy concept very wrongly. Damn! Thank you for this video!

[@letshope5646]

Dave, you have an exceptional knowledge in JavaScript. Much appreciated.Thanks

[@dardaC137]

I have watched a lot tuts on this thing .but the way u explaining every details is boosting my love for JS. Thanks a lot .

[@DaveGrayTeachesCode]

Glad to hear that! You're welcome! 💯🚀

[@judeleon8485]

Thanks Dave. Your tutorials are excellent. However, I want to suggest that you demarcate your output when you log it out on the console. So, it would be easy for someone to know what section of the code is being displayed at what section on the console. Outputs on the console can be confusing and diifficult to comphrehend without demarcation.

[@DaveGrayTeachesCode]

You're welcome, Jude 🙏 Good suggestion!

[@imakshith]

very informative David! thanks for sharing the content like this

[@niranjanpandit6225]

This is the best explaination of shallow vs deep copy in javascript. Keep it up Dave. You are a great teacher👍👍

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@matinsasan]

You're a great teacher. You know so well how to convey the intended educational message about an advanced topic in accumulating small digestible chunks, helping one to have a solid understanding why things work this way, not just how.

[@DaveGrayTeachesCode]

Thank you for the kind words 🙏

[@tomislavzivkovic3978]

Bravo!!! Finally explained understandable and clear.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@a_maxed_out_handle_of_30_chars]

thank you, the video was simple but a little confusing with all the code in single file and the console outputs but very valuable :)

[@divyanshupandey8]

Wonderful explanation Dave!!. Thanks

[@DaveGrayTeachesCode]

Very welcome!

[@anshumanpati5434]

Dave Thanks for making such good tutorials, none of the youtube channel have such precise content... :)

[@DaveGrayTeachesCode]

Glad you like them!

[@SalomDunyoIT]

Hi. A perfect explanation of fundamentals. I'm curious why Your channel is not that popular. You should collab with some channels like, Traversy Media, Dev Ed, and others so others can learn more. send a request for collab. I think They don't refuse.

[@DaveGrayTeachesCode]

Thanks! I do have a video on Traversy Media and one on freeCodeCamp. No viral videos yet, but the channel is growing. 🚀 I just started last year, so I'll keep at it. 😃 Thanks for watching and subscribing. 🙏

[@vjmathew6962]

Thanks Dave, very important information i was unware of. Thanks again

[@DaveGrayTeachesCode]

You're welcome, VJ!

[@danilo86petrovic]

This is so greatly explained... Thank you!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@arsyaswanth5]

Such a Great Explanation. You Deserve more views. Thank you. Got many concepts clarified from this video

[@DaveGrayTeachesCode]

You're welcome! 💯

[@christian-schubert]

Thank you very much for sharing this, probably the most comprehensive approach on this topic yet. The deepClone function is a really elegant proposition for nested data types, however, it doesn't seem to solve the problem copying some of the aforementioned complex data types pose (for instance nested Dates in objects).

[@DaveGrayTeachesCode]

Thanks for watching and for the feedback. I'll have to explore that again in the future! Please share any further findings.

[@VanderleiRobertoMoretto]

A PRO classe of data structures!

[@zal221]

Wow I thought I was past this point but I learned aot and I like how you sum things up in the end.

[@DaveGrayTeachesCode]

Thanks! 🙏🚀

[@hosamgnaba3205]

man i give you a like and subscribed to your channel right away, in my opinion your lesson are valuable, because even advanced programmer still get this kinda stuff wrong , thank you so much

[@DaveGrayTeachesCode]

You're very welcome! 💯

[@mackcoulibaly9981]

Great stuff. I enjoy all your tutorials. Do you teach in a more formal setting? If so, where? I want to take some online advanced js course with projects. Again, thanks for the excellent material you produce🙏🏼

[@DaveGrayTeachesCode]

Thank you, Mack! I'm currently a full-time dev, but also teach as an adjunct at FHSU. I was previously a full-time instructor before going back to industry.

[@shineLouisShine]

Thanks. Another principle to practice independently, and exercises could have been awesome, but... very interesting indeed.

[@BURBXN]

Great video. Everything was thoroughly explained and covered completely. Thanks for sharing your knowledge!

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@Robert-ed5dv]

Well explained, just what I was looking for since I work with React and need to prevent the state from mutating when dealing with nested data structures.

[@DaveGrayTeachesCode]

Great! Glad it was helpful. I'm planning some React tutorials for the summer. 😃

[@Robert-ed5dv]

Nice! Looking forward to that.

[@vishnunair9933]

Yet another great video, Dave! I hope you get more likes and subscriptions soon. You are one of the most underrated content creators in the tech space.

[@DaveGrayTeachesCode]

Thank you! 🙏 The channel is growing, and I appreciate the support. 💯🚀

[@vishnunair9933]

@@DaveGrayTeachesCode Your series on JavaScript is amazing! I hope you make a video series on Sveltekit and Svelte someday. I know you are busy with the series on React :).

[@גלמלאך]

The best video I ever seen!!

[@DaveGrayTeachesCode]

Thank you!

[@gordonmullen7272]

Thank you so much for explaining the details and can't wait for the follow-up with pue functions. It seems to me that we're going to see a lot about functional programming in the future or either a mixing, if you will, of oop , functional, and imperative to an extent.

[@DaveGrayTeachesCode]

You're welcome! 🙏💯

[@aleksd286]

Thanks Dave!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@prudhvichinnam1488]

Great content

[@DaveGrayTeachesCode]

Thanks!

[@matecode359]

Great explanation, thank u :)

[@DaveGrayTeachesCode]

You are welcome! 💯

[@saitejagatadi9711]

I learnt lot of things in this one video itself

[@DaveGrayTeachesCode]

Glad to hear that! 🚀

[@GeorgiosAmsterdam]

This is great stuff. Thanks

[@DaveGrayTeachesCode]

You're welcome!

[@ganeshanr2028]

structuredClone() is used to make deep copy easier.

[@DaveGrayTeachesCode]

Agreed. It wasn't available when I made this video. I could do another on it.

[@Shuyinz]

This is a great video! Thanks Dave! A question here! When using React, I often use spread operator or concat to make copy from prev state of the object, but it seems like this is pointless to do so after watching your video. This is because with this React practice, it seems we are always doing shallow copy? What is the alternative to write instead if we wants to write a deep copy for setState for example? Correct me if I am mistaking something here! Thanks Dave!

[@DaveGrayTeachesCode]

Great comment and question, Kim! If you have nested objects, a deep copy is ideal. Previously, we were creating our own deep copy function like in this tutorial or using another library with one like Lodash, but now, JS has recently added support for a native deep copy method called structuredClone. I need to make a tutorial about it: developer.mozilla.org/en-US/docs/Web/API/structuredClone ...Again, it is ok to use the spread operator most of the time, but nested object structures need this.

[@Shuyinz]

@@DaveGrayTeachesCode wow! Didn't know structuredClone existed! This is very useful! Thank you for reply Dave! Really appreciate for sharing wisdom to us!

[@fieldmarshalgaig4856]

literally all my alevel coursework problems summed up right here

[@azizsobirjonov4462]

great job but maybe it does not work with Date properties))) you should to add "... || obj instanceof Date" to the condition of the first if statements.

[@DaveGrayTeachesCode]

Nice note! 🙏 Looking at the new structuredClone now available in JS for a follow up to this. 🚀

[@DineshVutukuru]

Wow, clean explanation

[@DaveGrayTeachesCode]

Glad it was helpful!

[@DineshVutukuru]

@@DaveGrayTeachesCode Indeed it is

[@quietcorner5989]

Hey dave I have a question in the example of nested structural data type u said that vArray ad yArray have the same reference !! but when I log (vArray === yArray ) to the console I get false which means that they don't point to the same value in Memory !! please clarifiy this to me and also when I do vArray.push(5); instead of vArray[4].push(5); ==> yArray still the same and it didn't change its value!!

[@vesnamohar4273]

Thank you!

[@DaveGrayTeachesCode]

You're welcome!

[@williamrobson5094]

Great video! correct me if I'm wrong but, I was under the impression that a for in loop did not always iterate sequentially. Could this cause a problem in the deepClone example function?

[@DaveGrayTeachesCode]

No problems with an object and for in loops unless the keys are symbols. You may be remembering back to a discussion like this: stackoverflow.com/questions/38086774/does-the-for-in-loop-construct-preserve-order MDN does note that modifying during iteration can cause problems: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in If you have other references on this topic, I'm interested! 💯 In the meantime, you may also be interested in this video on maintaining synchronous iterations during async calls: kzbin.info/www/bejne/ap3Ue3V4etWdiKc

[@DrazinChetnik7]

Maybe you would like to explain obj.structuredClone() to simplify deep copy. :)

[@DaveGrayTeachesCode]

Maybe so! I'm sure you already know structuredClone is a very newly supported feature. I created this tutorial in the middle of 2021 and according to caniuse.com/?search=structuredClone the earliest support for structuredClone in Chrome was Jan 31st, 2022. It seems like a great JS addition and would make a good follow up to this tutorial: developer.mozilla.org/en-US/docs/Web/API/structuredClone

[@talhabinkhalilmuhmmad4159]

Please do some videos for advanced react concepts and complete react projects

[@DaveGrayTeachesCode]

Please check the React Tutorials playlist on my channel, and also, I recently completed a MERN Stack Project series.

[@ineedsolution]

Is it a Gary Holt Signature ESP guitar in the background?

[@DaveGrayTeachesCode]

No, it has been months, but I think you are seeing my Peavey Wolfgang with custom EVH paint.

[@doniaelfouly4142]

Thanks

[@ahmad-murery]

Very informative and must to know concepts in js, One should have a deepClone function in his utils.js toolbelt, Just a question regarding passing deepClone function as an argument to pureAddToScoreHistory function, can it be considered some sort of Dependency Injection? Thanks Dave

[@DaveGrayTeachesCode]

I agree about adding this to your utility function module. 💯 And good question! My answer: yes, I agree! I wanted to be explicit with the arguments because a pure function should be. Great to see your comment! 🙏💯

[@ahmad-murery]

@@DaveGrayTeachesCode I hesitated a little bit before writing my comment but then I said I'll try it this time and see 😎 Thanks, waiting for your next video

[@aeronwolfe7072]

thank you so much

[@DaveGrayTeachesCode]

You're welcome!

[@narenk8077]

Do you have any plans for bootstrap, scss?

[@DaveGrayTeachesCode]

I may do Bootstrap in the future. Tailwind is trending. SASS/SCSS is always good. So many topics and not enough time! 💯

[@sergiorey2049]

Amazing

[@robx_001]

very good

[@DaveGrayTeachesCode]

Thanks!

[@narenk8077]

How to compare both objects?

[@DaveGrayTeachesCode]

That's what this tutorial is about. Notice the discussion of referential equality in the beginning of the tutorial.

[@FarhadAliev-z1f]

I wanted have a deep copy with pure function for this object const x = { name : 'Ali', x_funct: ()=>{ console.log('Hello') }, date : new Date() } but date is not visible when I am logging it { name: 'Ali', x_funct: [Function: x_funct], date: 2024-07-27T10:20:23.993Z } { name: 'Farhad', x_funct: [Function: x_funct], date: {} }

[@alirezahekmati7632]

🚀

[@giorgikirvalidze394]

How do i like this twice

[@DaveGrayTeachesCode]

Thank you, Giorgi! 🙏

[@Fer-us4ny]

github?

[@Albert_Hall]

• const isGreat = () => console.log('wonderful tutorial'); • isGreat ();

[@DaveGrayTeachesCode]

Thank you!

[@1000ylovers]

Hi Dave, thanks for the amazingly knowledgeable video. I have a question regarding the definition of shallow copy. From my research on geeksforgeeks and MDN docs, the definition of shallow copy differs from your definition and demonstration of shallow copy shown in this video around 8 minutes mark to 10 minutes mark. On MDN doc, it says “A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too - and so, you may end up unintentionally causing changes to the source or copy that you don't expect. That behavior contrasts with the behavior of a deep copy, in which the source and copy are completely independent.” developer.mozilla.org/en-US/docs/Glossary/Shallow_copy On the other hand, you said in the video around 9:50 mark that we’ve made a shallow copy using the spread operator, although the yArray and zArray are not sharing the same reference, which from my understanding differs from the definition of shallow copy (do share the same reference, thereby copy change causes the source change as well) written on MDN docs and GeeksforGeeks website. Can you clear my head plz. I’m losing it haha. Thank you! Your tutorials are so amazing and I’m so grateful for it :)

[@DaveGrayTeachesCode]

That's a very thoughtful and well-researched question! Good work! It appears my use of the phrase "shallow copy" should be "shallow-clone" as referenced under MDN's spread syntax: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax - search for "shallow" on the page. The overall concept remains the same. Replace my use of the word copy for the word clone if it creates confusion. 💯🚀

[@1000ylovers]

@@DaveGrayTeachesCode Thank you for your reply :) So is there a difference between shallow copy and shallow clone? Or is it just worded differently?

[@DaveGrayTeachesCode]

At this point - after reviewing more of the MDN page - I'd say they are using the terms somewhat interchangeably. They state, "Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax..." and proceed to show spread syntax examples of making a shallow clone / copy. On the same page they state, "Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays, as the following example shows." - which is what I was showing in this video and how to make a deep copy if needed. Overall, don't let the wording confuse you. As long as you understand spread syntax will not copy / clone nested objects like a deep copy, you've got this.

[@1000ylovers]

@@DaveGrayTeachesCode Thank you again for the very quick reply. I now understand haha. Yeah that Interchangeably using the copy and clone was throwing me off. You are amazing Dave!😄

[@adlerpazhouhan2170]

Thank you Dave, it was a great explanation.

[@DaveGrayTeachesCode]

Glad it was helpful!