I Waited 15 Years For These New Array Methods

JavaScript has lots of array methods for doing things like sorting and reversing arrays, but the biggest problem with all these methods is they mutate the array you are working with. This is a huge problem when you are trying to write React code, functional code, or pure functions. This is why I love the new array methods that add immutable versions of all the mutable array methods we are used to.

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:36 - Immutability Explanation
02:45 - with Method
03:50 - toSorted Method
05:31 - toReveresed Method
06:00 - toSpliced Method
07:15 - Browser Support

#JSArrayMethods #WDS #Immutability

[ranvirchoudhary]

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!

[BackUp-czzn]

i like how mutable arrays are declared with "const"

[inasuma]

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!

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

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

[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? 🤔

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

[stefanamende]

Great video. Makes modifying react state arrays so much easier 👍

[PieJee]

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

[sanjarcode]

Love the "to" + "past tense", a consistent notation of out-of-place ops.

[riskitall]

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

[johnconnor]

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

[expertreviews]

Gr8 and most comprehensive video on data normalisation

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

[stewart]

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

[ukaszzbrozek]

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.

[tarabario]

Thanks for the announcement and analysis of the new functionality!

[flamme]

What about using a class Collection<type> instead ?

[eduardoranierosilva]

Not only that saves time on development, makes the code a lot more understandable during maintenance

[AndrewTSq]

Thanks for the headsup. Think this will be usable for my next project.