Shallow Copy and Deep Copy | Advanced Javascript Tutorial

Подписаться 319 тыс.

Просмотров 25 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn the difference between a Shallow Copy and a Deep Copy in this Advanced Javascript Tutorial. We cover shallow copy vs deep copy, mutable vs immutable and passing values vs references. Pure functions need you to know this foundational knowledge.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 JavaScript for Beginners: Full Course (8 hours): • JavaScript Full Course...
🔗 Javascript Recursion Tutorial: • JavaScript Recursion E...
Shallow Copy and Deep Copy | Advanced Javascript Tutorial
(00:00) Intro
(0:24) Javascript data types review
(1:03) passing values vs passing references
(3:05) mutable vs immutable data
(5:52) an impure function
(8:20) how to make a shallow copy
(14:17) how to shallow freeze an object
(16:04) how to make a deep copy
(21:43) a pure function
(23:45) Review of concepts
📚 References:
MDN data types and data structures: developer.mozilla.org/en-US/d...
"Four Ways to Immutability in Javascript": dev.to/glebec/four-ways-to-im...
"How to Deep Copy Objects and Arrays in Javascript": javascript.plainenglish.io/ho...
"What is the most efficient way to deep clone an object in JavaScript?" stackoverflow.com/questions/1...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about Shallow Copy and Deep Copy in Javascript helpful? If so, please share. Let me know your thoughts in the comments.
#shallow #deep #copy

Наука

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

6 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 123

@DaveGrayTeachesCode 3 года назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EfAl9bwzVZk.html

@prudhvichinnam1488 3 года назад

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

@DaveGrayTeachesCode 3 года назад

Thank you for the support! 🙏💯

@KentaroxKondo 2 месяца назад

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! 😂

@aileenchan3741 2 года назад

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 2 года назад

You're very welcome! 💯

@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!

@nagaistark 2 года назад

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

@DaveGrayTeachesCode 2 года назад

I'm glad they help 💯🙏

@belafekete3125 11 месяцев назад

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

@matinsasan 2 года назад

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 2 года назад

Thank you for the kind words 🙏

@letshope5646 10 месяцев назад

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

@moeibrahim6545 2 года назад

Man this is one of my favorite js channels

@DaveGrayTeachesCode 2 года назад

Thank you, Moe! 💯🙏

@divyanshupandey8 Год назад

Wonderful explanation Dave!!. Thanks

@DaveGrayTeachesCode Год назад

Very welcome!

@dardaC137 2 года назад

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 2 года назад

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

@BURBXN 3 года назад

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

@DaveGrayTeachesCode 3 года назад

Glad it was helpful! 💯

@danilo86petrovic Год назад

This is so greatly explained... Thank you!

@DaveGrayTeachesCode Год назад

Glad it was helpful!

@tomislavzivkovic3978 Год назад

Bravo!!! Finally explained understandable and clear.

@DaveGrayTeachesCode Год назад

Glad it was helpful!

@devworks8787 Год назад

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

@christian-schubert 2 года назад

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 2 года назад

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

@adlerpazhouhan2170 Год назад

Thank you Dave, it was a great explanation.

@DaveGrayTeachesCode Год назад

Glad it was helpful!

@vjmathew6962 Год назад

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

@DaveGrayTeachesCode Год назад

You're welcome, VJ!

@gordonmullen7272 3 года назад

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 3 года назад

You're welcome! 🙏💯

@aleksd286 2 года назад

Thanks Dave!

@DaveGrayTeachesCode 2 года назад

You're welcome! 💯

@prudhvichinnam1488 3 года назад

Great content

@DaveGrayTeachesCode 3 года назад

Thanks!

@VanderleiRobertoMoretto 2 года назад

A PRO classe of data structures!

@arsyaswanth5 2 года назад

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

@DaveGrayTeachesCode 2 года назад

You're welcome! 💯

@vishnunair9933 3 года назад

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 3 года назад

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

@vishnunair9933 3 года назад

@@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 :).

@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!

@zal221 3 года назад

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

@DaveGrayTeachesCode 3 года назад

Thanks! 🙏🚀

@anshumanpati5434 25 дней назад

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

@DaveGrayTeachesCode 25 дней назад

Glad you like them!

@a_maxed_out_handle_of_30_chars 11 месяцев назад

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

@GeorgiosAmsterdam Год назад

This is great stuff. Thanks

@DaveGrayTeachesCode Год назад

You're welcome!

@user-px7gt7ig6t Год назад

The best video I ever seen!!

@DaveGrayTeachesCode Год назад

Thank you!

@SalomDunyoIT 3 года назад

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 3 года назад

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. 🙏

@matecode359 2 года назад

Great explanation, thank u :)

@DaveGrayTeachesCode 2 года назад

You are welcome! 💯

@Robert-ed5dv 3 года назад

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 3 года назад

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

@Robert-ed5dv 3 года назад

Nice! Looking forward to that.

@vesnamohar4273 3 месяца назад

Thank you!

@DaveGrayTeachesCode 3 месяца назад

You're welcome!

@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! 💯

@threedoorsmorewhores 2 года назад

thank you!

@DaveGrayTeachesCode 2 года назад

You're welcome!

@shineLouisShine Год назад

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

@judeleon8485 2 года назад

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 2 года назад

You're welcome, Jude 🙏 Good suggestion!

@mackcoulibaly9981 2 года назад

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 2 года назад

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.

@aeronwolfe7072 Год назад

thank you so much

@DaveGrayTeachesCode Год назад

You're welcome!

@saitejagatadi9711 Год назад

I learnt lot of things in this one video itself

@DaveGrayTeachesCode Год назад

Glad to hear that! 🚀

@doniaelfouly4142 Месяц назад

Thanks

@sergiorey2049 3 года назад

Amazing

@DineshVutukuru Год назад

Wow, clean explanation

@DaveGrayTeachesCode Год назад

Glad it was helpful!

@DineshVutukuru Год назад

@@DaveGrayTeachesCode Indeed it is

@fieldmarshalgaig4856 Год назад

literally all my alevel coursework problems summed up right here

@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!!

@Johnny-rn8fb Год назад

very good

@DaveGrayTeachesCode Год назад

Thanks!

@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.

@alirezahekmati7632 2 года назад

🚀

@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.

@williamrobson5094 2 года назад

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 2 года назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4lqJBBEpjRE.html

@DrazinChetnik7 2 года назад

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

@DaveGrayTeachesCode 2 года назад

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

@Shuyinz 2 года назад

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 2 года назад

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 2 года назад

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

@ahmad-murery 3 года назад

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 3 года назад

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 3 года назад

@@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

@azizsobirjonov4462 2 года назад

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 2 года назад

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

@ineedsolution 2 года назад

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

@DaveGrayTeachesCode 2 года назад

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

@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! 💯

@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.

@giorgikirvalidze394 2 года назад

How do i like this twice

@DaveGrayTeachesCode 2 года назад

Thank you, Giorgi! 🙏

@Fer-us4ny 10 месяцев назад

github?

@Albert_Hall Год назад

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

@DaveGrayTeachesCode Год назад

Thank you!

@1000ylovers 2 года назад

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 2 года назад

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 2 года назад

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

@DaveGrayTeachesCode 2 года назад

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 2 года назад

@@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!😄