DEV Community

What's new in ES2023? 👀

Jasmin Virdi on May 26, 2023

Last year I wrote an article about the new features of ES2022 this year let's check out the new features coming in as part of ES2023. Fea...

Read full post

Anthony Fung • May 26 '23

Awesome - finally a functional version of sort. I know sort returns the sorted array already, but it also mutates the array which I've seen catch some people out a few times.

Thanks for the roundup!

Jonathan B. • Jun 1 '23

Totally. This is the major update I was really waiting for

Dragos Barbuta • May 30 '23

It's exciting to see how JavaScript continues to evolve and refine its toolbox with every new edition. And I must say, the new sorted method from ES2023 that you've highlighted really caught my eye.

The new Array.prototype.toSorted(compareFn) method is quite the game-changer. Sorting arrays has always been a staple in programming, but JavaScript's previous method of sorting an array (Array.prototype.sort()) alters the original array, which can sometimes lead to unintended side effects.

This new toSorted method provides a more functional approach by returning a new sorted array and leaving the original array untouched. I love this because it aligns more with the principle of immutability - a key concept in functional programming. This makes our code more predictable and easier to debug.

And don't forget, this isn't just for number arrays. With the compareFn parameter, we can sort arrays of strings, objects, or any other complex data structures.

Here's a quick example:

const cities = ['London', 'Paris', 'Tokyo', 'New York', 'Sydney'];
const sortedCities = cities.toSorted();

console.log(sortedCities); 
// ["London", "New York", "Paris", "Sydney", "Tokyo"]

console.log(cities); 
// ["London", "Paris", "Tokyo", "New York", "Sydney"]

As you can see, the original words array is not modified, promoting more predictable behavior in our code.

Thanks for sharing this article - ES2023 is going to bring some really neat enhancements to our JavaScript toolset. Can't wait to incorporate them into my workflow! 🚀👨‍💻

Peter Cockerell • Jun 1 '23

It's nice, but the effect has been available for a long time with

const sortedCities = [...cities].sort();

In both cases you're making a copy of the array then sorting it.

Dragos Barbuta • Jun 1 '23

Absolutely,[...cities].sort() has been a reliable approach.

However, the key benefit of toSorted() lies in reducing potential bugs. In my experience, I've debugged issues caused by inadvertent array mutations, often from newer developers not fully aware of .sort()'s mutating behavior.

toSorted() provides an intuitive, safer option that could save debugging time in the long run.

Progress never stops in the JavaScript world, does it?

Peter Cockerell • Jun 2 '23

Agreed, it's only for the better to provide replacements for some of JS's cruftier artifacts, like in-place mutation. I don't suppose the old methods will ever be deprecated and eventually removed - there's just too much legacy code out there that depends on them.

insert • May 30 '23

I really like the new array prototype methods, I try my best to avoid mutating variables in certain situations and sorts are always the worst to deal with.

Also, Ecmascript is a language specification, (2) has nothing to do with the language itself. Node.js has supported skipping shebang lines for at least a decade now, probably since its inception.

fruntend • May 29 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Jasmin Virdi • May 29 '23

Thank you supporting and sharing the article!🙌

Bryan Quiroz • May 28 '23

I actually like this new features!

Wilmela • May 26 '23

Thanks for sharing.

Asad • May 28 '23

Massive!! Thank you!

xgqfrms • Sep 14 '23

A much better demo for `Array.findLast()`

You can more clearly find that the result is the last one object.

const arr = [{v: 3, i: 1}, {v: 2, i: 2}, {v: 3, i: 3}, {v: 2, i: 4}];
const lastV2 = arr.findLast(obj => obj.v === 2);

console.log(`lastV2 =`, lastV2);
// lastV2 = {v: 2, i: 4}