JavaScript Array sort() vs toSorted() (new in ES 2023)

We all know that the JavaScript array sort() method sorts an array. So why do we need a toSorted() method?
toSorted() is new in ECMAScript 2023, also known as ES 14, which is the standard for JavaScript.
In this video, we look the array sort() and toSorted() methods. The sort() method sorts the array in place, mutating the original array. And toSorted() creates a new sorted array from the original array, treating the original array as immutable.
toSorted() is a great choice when working in applications that support immutable patterns such as state management libraries and functional programming techniques.
*Links*
JavaScript Code: stackblitz.com/edit/array-tosorted-deborahk
KZbin Video, "Understanding Immutability in JavaScript": kzbin.info/www/bejne/enO9doaGiJJoo7M
*Content*
00:00 Array sort() vs toSorted()
00:36 Array sort() method is mutable
01:49 Issues with a mutable sort
02:43 Array toSort() method is immutable
03:02 toSort() supported in ES 2023 and TypeScript 5.2
03:59 Array toSort() method is immutable (continued)
05:01 Wrap Up
05:30 Setting up Angular to work with ES 2023
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter (X): DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
View my KZbin content: www.youtube.com/@deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#javascript #sort #tosorted #sortvstostored #es14 #es2023 #angularandes2023

[@behzadkhosravanimajd]

I found your tutorial to be very informative. Thank you for sharing it.

[@deborah_kurata]

Glad it was helpful! Thank you!

[@adishjain2507]

Thank you for teaching this, really informative and helpful

[@deborah_kurata]

So great to hear! Thank you so much!

[@orhancanoguz4423]

Thanks Professor

[@deborah_kurata]

😊

[@estuardohernandez4230]

Thank you!

[@deborah_kurata]

Thank you for watching!

[@richarddefortune1329]

Thanks

[@deborah_kurata]

Thanks for watching!

[@timothyalcaide]

Or we can simply do ages.slice().sort((a, b) => a- b). Slice without params make a copy of the array.

[@deborah_kurata]

Yes. But they aren't implemented the same. You can see the implementation specification for `toSorted` here: tc39.es/ecma262/#sec-array.prototype.tosorted You can compare that to `slice` here: tc39.es/ecma262/#sec-array.prototype.slice

[@icode8029]

So it's a more prettier and concise way of doing : const sortedAges = ages.slice().sort((a, b)=> a - b), am I correct?

[@deborah_kurata]

Definitely more concise, more obvious and more clear. 😊

[@Eslam-ig2gf]

You mentioned in your last two videos that mutating the original array causes problems with applications that support immutable patterns, but I can't imagine how this occurs? Please can you explain it?

[@deborah_kurata]

I hope I said that it may cause problems with application that support "immutable patterns". Did I accidentally say "mutable patterns" somewhere?

[@Eslam-ig2gf]

I am sorry, I have edited it.

[@deborah_kurata]

Immutable patterns expect that a variable value is replaced with a new value, not modified "in place". Let's use an array as an example. Mutating the original array does *not* change the variable value. The variable is still set to the same memory address. So if the immutable pattern is looking for a change to the variable, it won't see that the variable changed. If you instead create a new array at a new memory address, and set the variable to that new array, any immutable pattern will see that the variable has changed. You can try out the code I linked in the video notes of the "Immutability video" to see that the setter is *not* called if an array is mutated in place. Did that clarify?

[@Eslam-ig2gf]

Yeah, but what makes me confused is: when the program get the value of a variable it tracks its address to get its value, ex: let arr = [1,2,3], its address arr:c4 , c4:[1,2,3], so the program will track these addresses to get the value of the variable each time unless it stores the actual value in another place so it will not recognize the change in this case. That is what I think to get the value of the variable, or do I have misunderstanding? Or by other words I don't know how immutable patterns work.

[@haroldpepete]

​@@Eslam-ig2gfyou should check out reference topic in javascript, how javascript recognize whether an element has changed or not