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
This type content is very rare in RU-vid. 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.❤🧡💛💚💙💜 Hey @jack, can you attach the link where you have tested the speed of the deepclone with various methods ?
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
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.
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 RU-vid could do better in this case.
Like is not a big indicator for a viral video, it's the watch time. So if you're watching the full video you're already helping the creator more than liking it.
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?.
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.
How about a simple recursive function for deep cloning? Just check if each item of an array is an array, if yes, make a recursive call, if not, Return spreaded ...item. Could you do a speed comparison as well?
I could do that, but I know what the results will be. Any native methods (structuredClone or shallow clone) will blow the freaking doors off of logic running in JS.
Ok, I was wrong, turns out it's faster. jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJDVlA1V1c0bzVDNjlYVktLNVBORHEiLCJjb2RlIjoiSlNPTi5wYXJzZShKU09OLnN0cmluZ2lmeShEQVRBKSk7IiwiZGVwZW5kZW5jaWVzIjpbXSwibmFtZSI6IkpTT04uc3RyaW5naWZ5In0seyJpZCI6IlBoSVVNTW9yLXZNVHhzcGt6Q3ZZbyIsImNvZGUiOiJzdHJ1Y3R1cmVkQ2xvbmUoREFUQSk7IiwibmFtZSI6IlN0cnVjdHVyZWRDbG9uZSIsImRlcGVuZGVuY2llcyI6W119LHsiaWQiOiJMY3hFanVLRzRhWl90LTZ3bjNWU3kiLCJjb2RlIjoiZnVuY3Rpb24gY2xvbmVPYmplY3Qob2JqKSB7XG4gIGlmKEFycmF5LmlzQXJyYXkob2JqKSkge1xuICAgIHJldHVybiBvYmoubWFwKGNsb25lT2JqZWN0KTtcbiAgfSBlbHNlIGlmKHR5cGVvZiBvYmogPT09ICdvYmplY3QnKSB7XG4gICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKG9iaikucmVkdWNlKChhY2MsIFtrZXksIHZhbHVlXSkgPT4ge1xuICAgICAgYWNjW2tleV0gPSBjbG9uZU9iamVjdCh2YWx1ZSk7XG4gICAgICByZXR1cm4gYWNjO1xuICAgIH0sIHt9KTtcbiAgfSBlbHNlIHtcbiAgICByZXR1cm4gb2JqO1xuICB9XG59XG5jbG9uZU9iamVjdChEQVRBKSIsIm5hbWUiOiJDb3B5IHdpdGggSlMiLCJkZXBlbmRlbmNpZXMiOltdfV0sImNvbmZpZyI6eyJuYW1lIjoiRGVlcCBDbG9uZSB3aXRoIEpTIiwicGFyYWxsZWwiOnRydWUsImdsb2JhbFRlc3RDb25maWciOnsiZGVwZW5kZW5jaWVzIjpbXX0sImRhdGFDb2RlIjoicmV0dXJuIG5ldyBBcnJheSgxMDAwMCkuZmlsbCgwKS5tYXAoKCkgPT4gKFxuICB7IGE6IFt7IHA6IDEgfSx7IHA6IDIgfSx7IHA6IDQgfV0sIGI6IFt7IHA6IFsxLDIsM10gfSw1LDZdLCBjOiBbNyw4LDldIH1cbikpOyJ9fQ
Hey Jack! What is your best JS framework and why? Do you even have something like best framework? 😅 I mean I want to be good at one or two that are enough to build things fast efficiently and flexible on production. I see everywhere people are doing click bait videos why I don't yes this and that, and you shouldn't too 😂 I really know that you have a lot of knowledge and great content, that's why I am asking 🙂 God bless you!
Thanks. And no, I don't think there is "one size fits all" best framework. You could have a content heavy application with only small areas of client side functionality (i.e. islands). For that I'd use Astro or HTMX. You could have a very heavy client side app with no requirements for SSR and for that I might look at something like React in a SPA mode on Vite, or Solid. If I had to pick two I'd probably go with NextJS and Astro. I think you effectively pick up SPA almost for free with NextJS. All you need to learn is a router like React Router or Tanstack Router.
Seems odd that structuredClone is slower. I assume because JSON is used so much in JS, it's been optimised to the hilt. So looks like structuredClone could do with some love here. I had a need to send JS Objects over a websocket connection, JSON was of course too limited, I needed Dates & Buffers etc. So just created a simple ObjectToBinary, & BinaryToObject, later I thought, actually that's also handy for Cloning & comparing objects too. Would have been much nicer if Javascript had this feature built in, as of course with my code not been Native it's slower, but doesn't seem to be an issue for what I need it for, even running on mobile etc. ps. I did look at NPM for something similar but couldn't find anything at the time, eg. js-binary requires a schema, I just wanted to pass an object and convert to & from binary, with custom types too.
Structured Clone is slower, yes. But it's also more compatible that JSON.parse(JSON.stringify()) and there is question of how much you are calling it. If you don't call it continuously then most likely in common use cases there won't be a noticable performance impact.
Is lodash just bloat at this point? Every time my coworker uses lodash I feel like I could write the method myself with less work, more clarity and more efficient code. And I also flash back to the article "Why you probably don't need lodash"
I still use lodash, why should I implement something that already covers all edge cases, is known in the team and tested? you write tests for your own implementation, everyone knows that you added it and not a second person add the same function somewhere else? (We have over 100 devs in our code base) And you sure you’re more efficient? Does it even make a difference if you don’t use it at 100k dataset size? Bunch of points to consider just to have 3 lines of code nicer which you look at maybe once a year
I don't think it's either/or. For example I'd rather see someone use `array.filter` in it's native form as opposed to `_.filter`. And a lot of Lodash covers these common cases that are now covered by ES6. And ES6 was released eight years ago. Having a look at the Lodash docs I'd say that roughly 60% of these methods are either directly replaced by ES6, or an ES6 one-liner. But for those 40% I might use Lodash for that.
@@jherr this 100% there's certainly good lodash functions but when I see people reaching for _.filter or _.sort I'm like... You know this exists in JS now, right? My page bundle thanks you 😂
All the functions I write are pure functions, so I have some deep copying happening all over my code, and honestly the performance penalty is not noticeable. You'd have to use pretty huge data structures to notice it.
