Tip: spread syntax creates a shallow copy of the original object. use the structuredClone() function to make a deep copy of an object. structuredClone() has support in all major browsers!
@klirmio21
Жыл бұрын
I am a beginner, can you please explain what do you imply by a shallow copy and deep copy? Shallow - meaning an object will be cloned but if it has nested children none of them will be cloned? And also, maybe some Usecases? where to use structuredClone()? thanks
@Thikondrius
Жыл бұрын
@@klirmio21 Basically if you use the spread operator on an array that contains nested object, the reference to these objects will remain intact, so when you are going to update the nested object in the copy, you are also going to modify the original nested object :s const a = [ "hi" , { hola : "senor" } ] const b = [...a] b[0] = "does not mutate original" b[1].hola = "this will mutate original" console.log(a) // [ "hi" , { hola: "this will mutate original" } ] As you can see the spread operator is not enough to ensure a copy that is completly "detached" from the orignal. But using structuredClone() , the copy won't have any reference to the original anymore. It basically will create the exact same object but a completly new one, with no relation with the original. const a = [ "hi" , { hola : "senor" } ] const b = structuredClone(a) b[0] = "does not mutate original" b[1].hola = "won't mutate the original either" console.log(a) // [ "hi" , { hola: "senor" } ]
@AmodeusR
Жыл бұрын
@@klirmio21 Better search in the internet because explaining and understanding such concept from a youtube's comment is a little bit difficult.
@klirmio21
Жыл бұрын
@@AmodeusR Mister RL above did a flawless job at explaning it though!
@klirmio21
Жыл бұрын
@@Thikondrius Bravo! Thank you very much my friend, I understood it well now. I will save your response in my knowledge base for future reference tytytytytytyty
@inasuma8180
Жыл бұрын
Great methods, I’m very happy about these. Something else to consider is making copies of arrays can also increase memory overhead where the original mutable methods wouldn’t. That said it’s negligible difference at execution time but it is a massive feasibility improvement!
@well.8395
Жыл бұрын
It's not negligible. Imagine doing that with an array of 10k elements, creating unnecessary copies.
@KD2139-b
Жыл бұрын
@@well.8395 Thats why we have both options available. But most of the time u won't have 10k elements in one single array - and if it's the case, there is a good chance, an array isn't the right choice...
@well.8395
Жыл бұрын
@@KD2139-b Ah the "junior developer" saying. There's hundreds of valid applications that would need to display thousands or hundreds of thousands of elements in an array. For example, a photo editor, rendering pixels, rendering objects, logic of a game's occlusion culling, doing chart graphics, doing "Rich text editing", and the list goes on. You don't simply create copies everytime just because that code looks cleaner.
@SuboptimalEng
Жыл бұрын
Coding Interview Tip: When sorting an array of numbers, you need to do arr.sort((a, b) => a - b). Running arr.sort() will give you an incorrect result.
@aman_s_96
Жыл бұрын
Is it really a coding interview tip? Looks more like JavaScript fundamentals to me, which you learn in first few days itself.
@FlorianWendelborn
Жыл бұрын
@@aman_s_96 I'm doing JS since over a decade and I've never encountered this. Only saw this fact recently in a random tweet. It's super unexpected behavior Tbf, in practice it's much more common to sort objects, and those need a sorting function anyway
@_Greenflag_
Жыл бұрын
Elementary, dear Watson !
@aminenadi693
Жыл бұрын
True, especially when there are negative numbers in the array.
@aman_s_96
Жыл бұрын
@@FlorianWendelborn That's really strange. Always seen it being mentioned in each & every course about JS.
@LePhenixGD
Жыл бұрын
Finally! It's such a relief to have non-mutating array methods Kudos to you Kyle for sharing this and DX as easy as possible I can't wait to implement these methods in my projects and experience the benefits firsthand. Thanks for sharing this awesome news!
@NathanHedglin
Жыл бұрын
I can see many devs allocating SO much more memory just to mutate something.
@stefanamende547
Жыл бұрын
Great video. Makes modifying react state arrays so much easier 👍
@PieJee1
Жыл бұрын
I have always uses slice(0) to copy arrays not the spread operator. Even though this is because i have transpiled from ES6 to ES5 for a long time and slice() resulted in smaller code with ES5 code that a browser could optimize better too
@xXx-un3ie
Жыл бұрын
this is the better way of copying shallowly. don't use spread operator, it is 70+ times slower. also: you can jsut do arr.slice() without the 0. makes the code look nicer!
@tejasshekar
Жыл бұрын
So are you saying that the with() method is doing some black magic behind the scenes that is not looping through the array and creating a new reference and then modifying it and returning it ? And is it not gonna impact performance? 🤔
@stewart6395
Жыл бұрын
I had to update Chrome to the latest version to make these methods work. The time hasn't come yet to use these features, because people rarely update their browsers and there's a high risk of breaking your app for them. So it could be a year or so before we can use all this new stuff in production
@expertreviews1112
Жыл бұрын
Gr8 and most comprehensive video on data normalisation
@sanjarcode
Жыл бұрын
Love the "to" + "past tense", a consistent notation of out-of-place ops.
@kneekoo
Жыл бұрын
I was there, Sally. 15 years ago!
@ukaszzbrozek6470
Жыл бұрын
I would be really cautious when talking about performance like that. I don’t know how those new methods are implemented in the run time, but is a good chance that they are doing it exactly the same way we used to do it but on lower level.
@shakapaker
Жыл бұрын
runtime*, on a lower level*
@twothreeoneoneseventwoonefour5
Жыл бұрын
@@shakapaker also "there is a good chance" instead of "is a good chance"
@stevenlischer
Жыл бұрын
Agreed, and microbenchmarks may be misleading because they don't show the disruption GC will cause
@ukaszzbrozek6470
Жыл бұрын
@@shakapaker sorry 😅 English isn't my first language. I usually don't make so many mistakes.
@MelMacaluso
Жыл бұрын
@@stevenlischer I wonder also, are those methods just syntatic sugarf that just do what usually is done by extending the prototype with a more declarative approach, thus making it yes more readable / mantainable but not more performant?
@HorstKirkPageKian
Жыл бұрын
Regarding the performance benefit of using these native methods: Is there a guarantee for that? For the performance benefit I mean. Who tells me that JS doesn't to two loops under the hood again, it could be just hidden from the developer.
@flywithoutwingss
Жыл бұрын
Correct... Who knows what is doing internally
@AndrewTSq
Жыл бұрын
Thanks for the headsup. Think this will be usable for my next project.
@riskitall7421
Жыл бұрын
Exercise caution when considering the opinions of influencers regarding performance matters; it is prudent to personally put their claims to the test. Many of these individuals create videos merely after perusing documentation, lacking the genuine hands-on experience requisite for their expansive discussions
@flamme8587
Жыл бұрын
What about using a class Collection instead ?
@ChristianHeilmann
Жыл бұрын
Just a hot tip: if you want to speed up your console.log() explanations, simply wrap what you want to log in curly braces. console.log({sorted}) will result in `{sorted: Array(3)}`
@johnconnor9787
Жыл бұрын
2:27 When we get the value of an array by index - the time complexity will be always O(1) no matter what aaray size we have
@mdzaidsiddiqui4262
Жыл бұрын
Exactly! It doesn't matter if we're accessing arr[1] or arr[2588422]. I didn't understand why he said it.
@nurbolatsansyzbay9998
Жыл бұрын
In order to have a new copy with only one change by index, we need to use spread operator(...people), which goes through all items in a list and adds it to a new list. It is O(n) time and it is what he was saying
@johnconnor9787
Жыл бұрын
@@nurbolatsansyzbay9998 2:17 - "second time". But this second time is actually O(1)
@QwDragon
Жыл бұрын
@@mdzaidsiddiqui4262 he also sorts array in one looping (4:54).
@nurbolatsansyzbay9998
Жыл бұрын
@@johnconnor9787 gotcha, agree 'second time' is O(1) not O(n)
@fenilli
Жыл бұрын
Wouldn't those methods internally HAVE to make a copy of the original array to run those? as they are references to a memory unless a new one is created? so what performance improvements would it make? I can see it being a better DX, but performance wise can't see where it would shine.
@rea1m_
Жыл бұрын
you are right, under the hood it's the same thing.
@erichkitzmueller
Жыл бұрын
Not sure if toSorted() can be faster, but toReversed() and toSpliced() can definitely avoid creating a 1:1 copy first. They can directly create the desired result from the original array.
@PauxloE
Жыл бұрын
Basically, in the first iteration of sorting, instead of shuffling elements around inside the array, it'll copy them (in a slightly more sorted way) to the new array, then continue on that. Saves a copy operation.
@erichkitzmueller
Жыл бұрын
@@PauxloE Well yes, I guess that depends on the sorting algorithm. I can see this working as described e.g. for quicksort. Less so e.g. for insertion sort.
@BackUp-cz6zn
Жыл бұрын
i like how mutable arrays are declared with "const"
@kneekoo
Жыл бұрын
Yup, my giggle of the day too.
@chinmayghule8272
Жыл бұрын
The array elements are mutable, but the reference to the array is a constant.
@baxtables
Жыл бұрын
The reference is still immutable.
@BackUp-cz6zn
Жыл бұрын
@@chinmayghule8272 i know but it's funny to say "a mutable array is declared with "const" ".
@twothreeoneoneseventwoonefour5
Жыл бұрын
In Javascript you need to be VERY equal to be "equal", that's why you use === operator basically 100% of the times. But even then, you are not equal sometimes when you should be. In Javascript you need to be VERY constant to be "constant", that's why you use... Typescript with "as const" assertion operator. (it is "const arr = [1, 2, 3] as const;" if you are not familiar). But even then, you are not constant at runtime. We are doomed.
@danielm1
Жыл бұрын
5:15 I think you meant to say it saves up on the copying part, but it will loop more than once because it has to keep looping until it's sorted. Although, even in the "less efficient" version, JIT compilation can be quite smart so maybe it's more efficient than we think.
@_Greenflag_
Жыл бұрын
'It save on perfomance'. You don't know :) Did you test it ? Have you seen the signature of those functions ? They are maybe doing the same things you do 'manually'. Plus if you want something just implement it don't wait for it to come :)
@eduardoranierosilva
Жыл бұрын
Not only that saves time on development, makes the code a lot more understandable during maintenance
@NathanHedglin
Жыл бұрын
Also potentially uses a lot more memory.
@eduardoranierosilva
Жыл бұрын
@@NathanHedglin on the first or second scenario brought by Kyle you say that?
@tengun
Жыл бұрын
Without any timing evidence, I don't think these new methods are more efficient than the old way. For example, if your loop does two actions, it would be the same as having 2 loops doing 1 action each (in terms of complexity). They are just useful in reducing code and increasing clarity.
@PauxloE
Жыл бұрын
Don't forget the actions for increasing and comparing the counter.
@tengun
Жыл бұрын
@@PauxloE i said "in terms of complexity"
@PauxloE
Жыл бұрын
@@tengun In terms of complexity (i.e. ignoring constant factors), it's also the same as just having one loop doing just one action, too. But in reality, the factors also matter, especially when you are in the same complexity class.
@tengun
Жыл бұрын
@@PauxloE *action here is in broad definition. It can be an expensive cpu computation, like sorting. In that case, the counter is hardly a problem.
@tarabario
Жыл бұрын
Thanks for the announcement and analysis of the new functionality!
@talkohavy
Жыл бұрын
Hey, I have a serious question. How did you get notified about these methods coming out and being released? I also want to be like you, in the sense that i want to be up-to-date with new stuff coming out or getting updated. Is there a JavaScript newsletter that you're subscribed to? How did YOU first learn of these 4 new methods?
@shahfaisal3923
Жыл бұрын
Thank you so much for sharing with us.
@jacqueskloster4085
Жыл бұрын
My daily observation is that array methods instead of loops are often a source for cascaded full table scans of unexperienced developers... To be honest, I try to avoid then whenever possible. Yet, there are absolutely valid use cases for them. But a concatenated find filter map some isnt one.
@RaubeR666
Жыл бұрын
With "lodash/fp" it was possible like 6 years ago already: `flow([set(2, "Nice"), sortBy(identity), reverse])(array)`.
@atombanker
Жыл бұрын
Thank you so mcuh share this kind of grateful content! I always appreciate from japan🇯🇵 いつもありがとうございます!
@Naej7
Жыл бұрын
いつも?Not どうも? I’m learning Japanese lol
@theisoj
Жыл бұрын
Thanks Kyle as always! 👍
@krtirtho
Жыл бұрын
It's a fairly simple change. A simple polyfill should cover the cross browser support
@tontonses7824
Жыл бұрын
You can't sort by just looping once. The perf improvement is not 2n vs n, but n(log n + 1) vs n log n. Negligible.
@antehll
Жыл бұрын
I'm guessing performance is gonna suffer if you do lots of these functions, cloning for each of them, instead of mutating a single copy multiple times
@andsheterliak
Жыл бұрын
It seems so. So it's better to just modify the new array after making a copy with these methods. You can try this on your computer: const length = 1000000; const arr = new Array(length).fill('String'); // ------- for loop console.time('for loop'); const forLoopCopy = []; for (let i = 0; i < length; i++) { forLoopCopy.push(arr[i]); } forLoopCopy[length - 1] = 'End'; forLoopCopy[length - 2] = 'Pre End'; console.timeEnd('for loop'); // ------- spread console.time('spread'); const spreadCopy = [...arr]; spreadCopy[length - 1] = 'End'; spreadCopy[length - 2] = 'Pre End'; console.timeEnd('spread'); // ------- with console.time('with'); const withCopy = arr.with(-1, 'End'); withCopy.with(-2, 'Pre End'); console.timeEnd('with');
@roblesize
Жыл бұрын
Dam, yall had it this bad with JavaScript this whole time? Imo the best language ive used so far is Kotlin, now thats a good language
@cristianstefano-z3y
Жыл бұрын
can you do a step by step tutorial building a ptc site with database ,user registration , ad serving page,admin panel and show how to connect everything across ?
@arshadsiddiqui9071
Жыл бұрын
You look 23. Been waiting since you were 8 is pretty crazy.
@ShiloBuff
Жыл бұрын
Cool, now there needs to be a built in method for deep merging objects both mutable and immutable. I couldn't find a "lightweight" library that could merge and mutate an object so I had to create a less than optimal route. There are libraries for deep merging but they seem to be for immutable. And i refuse to use a big library just for 1 method.
@SIVA-Mycount
Жыл бұрын
One doubt. Do all the methods do a deep copy or a shallow copy ?
@savire.ergheiz
Жыл бұрын
Its basically syntax sugar. Its still do the copies operation it self 😂
@Naej7
Жыл бұрын
@@savire.ergheiz That does not answer the question.
@barneylaurance1865
Жыл бұрын
Shallow. From MDN: "JavaScript array-copy operations create shallow copies"
@alexm9104
Жыл бұрын
@@barneylaurance1865 so... structuredClone() hello again. Or JSON.strngf/parse.
@ilirbeqiri253
Жыл бұрын
Thanks for the explanation. On top as always. What do you think about naming? "with" naming seems to be problematic to express what it actually really does. Same for "toSorted", maybe "immutableSort" would have been more descriptive. What is your opinion?
@fredoverflow
Жыл бұрын
"with" is an established convention in other languages, e.g. Kotlin data classes
@ilirbeqiri253
Жыл бұрын
@@fredoverflow JS used to have their own conventions that we all liked, and with() is one of the functions that we always have been told to use sparingly and ignore most of the time.
@avelinecash
Жыл бұрын
hey kyle! off topic but can you do a vid about the extensions you're using in VS code? thanks
@christopheanfry2425
Жыл бұрын
Great content as usual!!! Very good new methods that make things easier and as you mentioned also more performance. 👍👍👍
@ArifMatubber-km4nv
Жыл бұрын
Thank you so much
@christianjansson6806
Жыл бұрын
Great tips, but a suggestion for future videos - could you stop using arrays of strings/numbers. It would be much more practical to have an array of objects, like a Person-class {name, age} or whatever... makes much more sense. Arrays of strings or numbers are never used in real life, except when doing tutorials... 🙂That would have been brilliant to show together with the new structuredClone()-method also. 👍
@cherubin7th
Жыл бұрын
Great, even more you need to remember if you want to be able to read JavaScript. Just so that 5 people can type one line less per project.
@rishichoubey5060
Жыл бұрын
Wow so easy to understand !
@aremu_smog
Жыл бұрын
These looks super interesting but aren't these syntactic sugar? If yes, I think the major benefits remains clean code and not necessarily performance.
@lukas.webdev
Жыл бұрын
Very helpful! Thanks for sharing with the community. 😉🔥
@Abdallah_Ismail
Жыл бұрын
0:12 He can actually see the code guys! Sometimes I think he's a robot or some sort of an AI especially in his old videos like from 4 years ago O.O
@uthoshantm
Жыл бұрын
Well, toSorted() is not going to gain much in performance taking into account that copying is O(n) while sorting is O(n log n))
@atxorsatti
Жыл бұрын
Mathematically yes, practically we loop one time less. Idk it seems to be more of a convinance at the end.
@SebastianSastre
Жыл бұрын
And Smalltalk had these and more since 70's
@uicornerwithJ
Жыл бұрын
Cool methods. thanks
@bilalarain4632
Жыл бұрын
I think in this erra of unlimited memory and storage availability we should less worry about array mutability. rather a simple [...orignalArray].reverse would do the job and the best part for managing memory on your own is to assign [...originalArray] to a variable and then undefined or despose it later.
@KahyaHasan
Жыл бұрын
Thank you 😊
@joshuakb2
Жыл бұрын
It isn't quite correct to say that the copy causes one loop through the array and the sort causes another loop, totalling 2 loops. JavaScript's array sorting implementations are in-place and slower than linear time, so under the hood, `toSorted` will also have to copy and then sort the array, causing more work than simply 2 loops. I haven't seen any evidence that toSorted is more efficient than a copy and sort.
@alisoylu4034
Жыл бұрын
Great content. Thanks...
@njox1635
Жыл бұрын
Insightful,but I have tried on Firefox but looks like some features aren't yet!
@skipper3204
Жыл бұрын
Thumbnail: what is the point of reversing an array if you sort it right after? 🧐
@gopallohar5534
Жыл бұрын
After watching so many of your videos, the only question comes to my mind Who is Sally?😂
@njox1635
Жыл бұрын
LoL 😂
@repeekyraidcero
Жыл бұрын
SO would love this post. I kinda prefer PHP to JS for Webtasks tho. JS is too easily deterred.
@a.9913
Жыл бұрын
What do you mean deterred?
@user-fed-yum
Жыл бұрын
people[2] = "new" is not changing the people array. You would have to declare the people array using let, and then set it to a new value later, eg people = [1, 2] would then result in changing the people array. Yes, you may find this confusing.
@valtteri495
Жыл бұрын
Yes it does. You can try it in Node shell or console of a browser
@user-fed-yum
Жыл бұрын
@@valtteri495 Nope. The items the array manages change. The array itself doesn't. The const is referring to the array reference, not the items that the array manages. If the array could be changed, the const contract would be broken. When you do this in the console, you aren't looking at the array reference, you are looking at the values of the references that the array manages. One could argue this is pretty broken. And there are good arguments either way. And it follows many languages that preceded JavaScript that exhibit the same behaviour.
@valtteri495
Жыл бұрын
@@user-fed-yum I do understand the difference between value and reference in arrays and objects. You are correct that the value of the array is its location in memory and it cannot be changed if the array has been declared with keyword const. However, I would argue that ”changing an array” means the same as ”mutating an array”, which the action you described in your first comment is. If I wanted to split hairs, I would say that the value of the array changes when you re-declare it and the array can be changed (or mutated) with methods or using bracket notation
@srinuvanam4043
10 ай бұрын
How javascript object works and do properties(key) stores corresponding values and all the properties will be stored in the consecutive memory location?
@harshavardhans4374
Жыл бұрын
Instead of spread operator we can use structuredClone for a deep copy
@stevenlischer
Жыл бұрын
Be careful using these. Make sure your problem must be immutable. Memory allocation and garbage collection in JavaScript is not free and using these methods with large arrays or using them within a loop will kill performance compared to a mutable solution
@MelMacaluso
Жыл бұрын
Exactly, I was going to say not always we want immutable version of arrays for the sake of having pure testable functions, sometimes, unforutunately a mutable version, when operating on the 100k+ order is preffered
@dimitritarasenko9960
Жыл бұрын
Who are you performance and memory management guys? Are you students or something like professor without any real experience? I see this sort of ppl only in comments. All real life projects I have ever seen before give a f* about this kind of performance issues. What are you doing frontend side with 100k length arrays? Are you these guys who have a Fibonacci calc on each project? Wtf?
@stevenlischer
Жыл бұрын
@@dimitritarasenko9960 Many front end devs might not need to be concerned about this. They'll never implement a dynamic search for a large directory of data, or work on a shop with thousands of purchasable items, or make a chat system, or work on a demanding web game, etc etc. Most backend devs do care about these things though because it is much more common to run into performance/memory problems from iterating large data structures there.
@codesymphony
Жыл бұрын
But why would they use these versions if they're fine with mutating the original array
@stevenlischer
Жыл бұрын
@@codesymphony a cornerstone of functional programming is "pure" functions that don't mutate arrays/objects but instead return completely new objects and arrays. Sometimes pure functions are handy and keep code easier to reason about and debug, but too often pure functions are presented as being the best or preferred way and there is no critical analysis of the consequences. So new devs seeing this video may wonder which functions they should use and no context has been provided to help them decide which makes the most sense for their application.
@Alek-nm6cx
Жыл бұрын
Thanks Kyle, your the best
@MaverickDriver95
Жыл бұрын
Can someone make some js benchmarks on this? It feels very superficial
@andsheterliak
Жыл бұрын
I believe these new methods are more for convenience than performance. You can try this simple test for the "with" method on your computer: const length = 1000000; const arr = new Array(length).fill('String'); // ------- for loop console.time('for loop'); const forLoopCopy = []; for (let i = 0; i < length; i++) { forLoopCopy.push(arr[i]); } forLoopCopy[length - 1] = 'End'; console.timeEnd('for loop'); // ------- spread console.time('spread'); const spreadCopy = [...arr]; spreadCopy[length - 1] = 'End'; console.timeEnd('spread'); // ------- with console.time('with'); arr.with(-1, 'End'); console.timeEnd('with');
@twothreeoneoneseventwoonefour5
Жыл бұрын
@@andsheterliak (on my pc, Ryzen 5 5625u, 16gb ram) it seems like under load spread is the slowest one (if you do multiple passes of the same test after one another), with 140ms. If it is only a single run though, spread and with have the same performance, 30-35ms. For is the fastest with 18-20ms.
@TeKadGdn
Жыл бұрын
good material. these new methods are syntatic sugar only and expand a number of methods without good reason
@sonictailsandsally
Жыл бұрын
With respect to time complexity, iterating through an array twice performing one action is no different to iterating through an array once performing two actions. The time complexities are the same: O(n)
@aram5642
Жыл бұрын
The real good change here is .with + readability. I wish there was .tap (as in rxjs) so that I could drop in a console.log, but it's just me... still using console over debugger. I will never change ;)
@twothreeoneoneseventwoonefour5
Жыл бұрын
What do you mean? You can easily do console.log in both map, reduce and others. Sort, splice and others are a one way operation. There is simply no place to put a tap. RxJS does not even have a sorting method last time I checked. What the hell? Just use a for loop, or [].forEach() then if you want something unconventional.
@aram5642
Жыл бұрын
@@twothreeoneoneseventwoonefour5 haha, relax, too much tension!
@twothreeoneoneseventwoonefour5
Жыл бұрын
@@aram5642 sorry but it is just the way I *react* , I cannot *promise* you that I will change my *vues* on this matter, so sadly you can't *observe* me being a better person in future. I guess I will *return* to my /home. Take care not to hit your toe on *solid and angular* surfaces like a door, or else hospital may *await* you.
@derfastimmerzustimmer8635
Жыл бұрын
2:17 Why would you need to loop through the array a 2nd time to change a value by index?
@Blast-Forward
Жыл бұрын
I find your lack of semicolons disturbing. 😝 Interesting video, thanks for explaining! Learnt something. 👍
@nothenium
Жыл бұрын
Thank you Kyle, with your advice I have built a Discord clone ❤
@HuynhLuong227
Жыл бұрын
Thank you🎉🎉🎉
@foxcirc
Жыл бұрын
My problem with this is that it makes it really easy to create a lot of copies, which is no different then spread. Doing functional style programming without mutation in a language like Javascript where the compiler is not designed optimize these patterns is problematic and this makes it really easy to create slow code. I think generally you should prefer mutability (in JS)
@zayne-sarutobi
Жыл бұрын
Na, mutability introduces bugs that are often hard to reason about... Have fun with those 👋
@foxcirc
Жыл бұрын
that's why I use *rust* instead of Javascript 🦀🦀🦀💪💪
@zayne-sarutobi
Жыл бұрын
@@foxcirc Good for you then
@meinlet5103
Жыл бұрын
does reducing code makes code faster in js? I think the implementation will be same as maunal copy & manipulation..
@wfl-junior
Жыл бұрын
These are awesome for the react ecosystem
@zkksch
Жыл бұрын
Names of those methods are a bit confusing. They at least should be consinstent and use with in all methods name (withSorted withReversed etc.) but even better explicitly say what they do: copyWith, copySorted etc. Also is there an optimization to not create new array for each method if they were used in chain? Iterators approach (like in python) allows you to do it: you're creating chain of iterators, and finalize resulting iterator only when you actually need a copy, so only one copy will be created (if there is no "helping copies" inside those iterators) no matter how many modifications you've used.
@invisi1407
Жыл бұрын
withSorted() sounds weird - toSorted() or toArray() or toString() or similar is usually the right naming for these methods - they return something new in a different way. They don't do it _with_ anything.
@shantanusharma4901
Жыл бұрын
Perfect sir
@daraa.8681
Жыл бұрын
Just a question. If you see the flaws, why don't you upgrade it yourself? Or you could throw a suggestion to the appropriate entity? That is a next-level developer. I'm sure you're capable of it.
@paxdriver
Жыл бұрын
Doesn't "with" just make it harder to read someone else's code? Javascript doesn't really need more ways of doing one thing when a single arrow function in map or ellipsis does the same? I don't get why they don't focus on more useful new features like finally getting modules to work properly
@canabale
Жыл бұрын
Just a little hint... 1. It would be great if you'd put links to the docs in the description. 2. It would be great if you could mention compatibility right at the start of the video...
@imadev2020
Жыл бұрын
Amazing, I would like to see a video with your opinion about Map vs Object and Set vs Array usage 😊.
@yamiteru4376
Жыл бұрын
Learn about algorithms and data structures and you'll know.
@moonyyy9093
Жыл бұрын
Great new methods, but the problem for now is the browsers support.
@dileepa-mn2to
Жыл бұрын
Bro can you make a video about atomica structure of the next project, how the data passing and state handeling throught the atomic componenets, thank you
@talgy2671
Жыл бұрын
Do I have to update javascript someway to use it in my electron app?
@SilviuBurceaDev
Жыл бұрын
What should I use to have those array methods? ESNext?
@ekarolak
Жыл бұрын
Opera is also compatible now.
@latedriver9019
Жыл бұрын
Remember that the spread operator "..." only performs a shallow copy on non-nested data.
@patrickthompson1190
Жыл бұрын
That’s not a deep copy, it’s a shallow copy
@latedriver9019
Жыл бұрын
@@patrickthompson1190 corrected. I meant to type shallow copy and was thinking deep copy while I did it...
@phoenix-tt
Жыл бұрын
Never understood why React would take the obviously flawed path of "immutability", create a whole ecosystem around it and force the whole world to cope with it. Vue, for instance, handles array (and other built-ins) mutations using a proxy which redefines the push/pop/etc. methods in a reactive manner. It's very simple to use and avoids the performance penalties and other gotchas of "immutability". People often forget that copying an array is expensive just because of Garbage Collection.
@adambickford8720
Жыл бұрын
In practice this is almost immeasurable. Sure, there are corner cases where it matters but it's worth the more reliable code. This is hardly a 'react' thing.
@twothreeoneoneseventwoonefour5
Жыл бұрын
The answer to "why" is very simple. It was the path of least resistance. When the React was adding hooks, it was easier to go with that path, while if you suddenly started to use proxies, you would need to rewrite the whole React differently from the ground up. The big reason that *class components are still supported* is backwards compatibility, also.
@danko95bgd
Жыл бұрын
Because facebook developers are dumb and they create dumb tools. react native: worse tool for hybrid (slow and bad). react worst web framework (slow and bad). FB developer console is horrible, their UX is abysmal, you can't find anything, but sheep still praise people like Dan Abramov like he is some genus. He created the worst state managment library with most boilerplate haha
@stevenlischer
Жыл бұрын
If there's significant animation happening on the page, most arrays will need to be mutable and object pools will become critical to avoid GC which causes stutters
@phoenix-tt
Жыл бұрын
@@adambickford8720 It's not only about performance. It's the fact that the React ecosystem is fractured across multiple different state managers, store patterns, etc. There are just so many ways now to do a thing that devs start to forget that they are paid to write actual code, not to hop around the trendy new tech. I'd rather let framework authors decide on the best practices and maintain that than choose poorly and risk regretting it late in the project.
@williamt.roberts4771
Жыл бұрын
So, this with() is not recommended and is depreciated?
@willyhorizont8672
Жыл бұрын
good news!🎉
@sarcasticdna
Жыл бұрын
Who are Sally and John? They are there in almost every video
@madsfrost9464
Жыл бұрын
But what is the current support for this in browsers?
@barneylaurance1865
Жыл бұрын
Not sure, but I guess it should be possible to transpile it to something supported in whatever browsers you want to support.
@toromanow
Жыл бұрын
How to find out which node version supports those features?
@aryangupta8756
Жыл бұрын
method 3, what's the difference b/w .slice & .toSpliced?
@przemek896
Жыл бұрын
These methods creates deep copy or shallow copy ?
@batingo1234
4 ай бұрын
what does '??=' mean? what keywork can I search to understand it ? thanks.
@me_rinta
Жыл бұрын
Do these new methods do shallow or deep copy?
@sanjarcode
Жыл бұрын
The spread operator does shallow copy. And this is a notation feature meant to replace that, so I think it's shallow copy too.
@kukulis100
Жыл бұрын
The center idea is 'immutable' ?
@deadlyecho
Жыл бұрын
They are turning this into somth similar to the Java Streams API
Пікірлер: 428