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

@@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" } ]

@@klirmio21 Better search in the internet because explaining and understanding such concept from a youtube's comment is a little bit difficult.

@@AmodeusR Mister RL above did a flawless job at explaning it though!

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

It's not negligible. Imagine doing that with an array of 10k elements, creating unnecessary copies.

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

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

Is it really a coding interview tip? Looks more like JavaScript fundamentals to me, which you learn in first few days itself.

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

Elementary, dear Watson !

True, especially when there are negative numbers in the array.

@@FlorianWendelborn That's really strange. Always seen it being mentioned in each & every course about JS.

I can see many devs allocating SO much more memory just to mutate something.

Yup, my giggle of the day too.

The array elements are mutable, but the reference to the array is a constant.

The reference is still immutable.

@@chinmayghule8272 i know but it's funny to say "a mutable array is declared with "const" ".

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.

runtime*, on a lower level*

@@shakapaker also "there is a good chance" instead of "is a good chance"

Agreed, and microbenchmarks may be misleading because they don't show the disruption GC will cause

@@shakapaker sorry 😅 English isn't my first language. I usually don't make so many mistakes.

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

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!

Correct... Who knows what is doing internally

Exactly! It doesn't matter if we're accessing arr[1] or arr[2588422]. I didn't understand why he said it.

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

​@@nurbolatsansyzbay9998 2:17 - "second time". But this second time is actually O(1)

@@mdzaidsiddiqui4262 he also sorts array in one looping (4:54).

@@johnconnor9787 gotcha, agree 'second time' is O(1) not O(n)

Also potentially uses a lot more memory.

​@@NathanHedglin on the first or second scenario brought by Kyle you say that?

you are right, under the hood it's the same thing.

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.

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.

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

Don't forget the actions for increasing and comparing the counter.

@@PauxloE i said "in terms of complexity"

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

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

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

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?

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

But why would they use these versions if they're fine with mutating the original array

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

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');

いつも？Not どうも？ I’m learning Japanese lol

Its basically syntax sugar. Its still do the copies operation it self 😂

@@savire.ergheiz That does not answer the question.

Shallow. From MDN: "JavaScript array-copy operations create shallow copies"

@@barneylaurance1865 so... structuredClone() hello again. Or JSON.strngf/parse.

LoL 😂

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');

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

"with" is an established convention in other languages, e.g. Kotlin data classes

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

Mathematically yes, practically we loop one time less. Idk it seems to be more of a convinance at the end.

What do you mean deterred?

Learn about algorithms and data structures and you'll know.

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.

@yt accnt Think you got the wrong comment?

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.

@@twothreeoneoneseventwoonefour5 haha, relax, too much tension!

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

Makes you, who understands the implications, a more desirable developer then. A win situation.

Fair, its important to understand its implications, but if you understand the implications and pick when to use this well, you can write neat code that is easier to test, read, and update. If you recognise that in the program you are writing it is vital your code executes as quickly as possible, then you wouldn't want to use these, or find a way to write your code using them but transpile them into code that doesn't use them. If a program is running once a week over 4 hours and the difference between these two ends up being 10 minutes, and no one cares if it takes 4 hours or 8, then I'd rather write code that's easier to read, maintain, and test, and add 4% more execution time.

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.

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.

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

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

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

Na, mutability introduces bugs that are often hard to reason about... Have fun with those 👋

that's why I use *rust* instead of Javascript 🦀🦀🦀💪💪

@@foxcirc Good for you then

Probably because you are wrong. It has only the most barebones methods. Want to know more useful ones? Look at Rust and Dart(or I call it - the better JS/TS).

@@twothreeoneoneseventwoonefour5 That was a joke btw, JS still has 40+ array methods and I find some of them repetitive and unnecessory. Unless I am obliged to learn Rust for work, I am not going to do it. It is not everyone's cup of tea.

Not sure, but I guess it should be possible to transpile it to something supported in whatever browsers you want to support.

The spread operator does shallow copy. And this is a notation feature meant to replace that, so I think it's shallow copy too.

Yes it does. You can try it in Node shell or console of a browser

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

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