DEV Community

Cover image for What's new in ES2023? πŸ‘€
Jasmin Virdi
Jasmin Virdi

Posted on

What's new in ES2023? πŸ‘€

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.

Features of ES2023

1. Find array from the last

This function will allow us to find element from the last to first of the array based on a condition.

const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}]

console.log(array.findLast(n => n)); //result -> {a: 4,b: 4 }

console.log(array.findLast(n => n.a * 5 === 20)); // result -> {a:4,b:4} as the condition is true so it returns the last element.

console.log(array.findLast(n => n.a * 5 === 21)); //result -> undefined as the condition is false so return undefined instead of {a:4,b:4}.

console.log(array.findLastIndex(n => n.a * 5 === 21)); // result -> -1 as the condition is not justified for returning the last element.

console.log(array.findLastIndex(n => n.a * 5 === 20)); // result -> 3 which is the index of the last element as the condition is true.
Enter fullscreen mode Exit fullscreen mode

2. Hashbang Grammer

This feature would enable us to use Hashbang / Shebang in some CLI.
Shebang is represented by #! and is a special line at the beginning of the script that tells the operating system which interpreter to use when executing the script.

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(2*3);

#!/usr/bin/env node
// in the Module Goal
export {};
console.log(2*2);
Enter fullscreen mode Exit fullscreen mode

#!/usr/bin/env node this line would invoke a Node.js source file directly, as an executable in its own.

We would not need this line (#!/usr/bin/env node) to invoke a file explicitly via the node interpreter, e.g., node ./file

3. Symbols as WeakMap keys

This allows using unique Symbols as keys. Currently WeakMaps are limited to only allow objects as keys. Objects are used as keys for WeakMaps because they share the same identity aspect.

Symbol is the only primitive type in ECMAScript that allows unique values therefor using Symbol as key instead of creating a new object with WeakMap.


const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));
Enter fullscreen mode Exit fullscreen mode

More use cases related to ShadowRealms and Record & Tuples using Symbols as WeakMaps

4. Change Array by Copy

This provides additional methods on Array.prototype to make changes to array by returning new copy of it with the change instead of updating the original array.

New Array.prototype introduced functions are:

  1. Array.prototype.toReversed()
  2. Array.prototype.toSorted(compareFn)
  3. Array.prototype.toSpliced(start, deleteCount, ...items)
  4. Array.prototype.with(index, value)
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toReversed */

const reversed = numbers.toReversed();
console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSorted  */
const sortedArr = numbers.toSorted();
console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* with */
const replaceWith = numbers.with(1, 100);
console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSpliced */
const splicedArr = numbers.toSpliced(0, 4);
console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

Enter fullscreen mode Exit fullscreen mode

These are some awesome set of features coming up with ES2023 which I am really looking forward to try them out personally in my day to day coding.

Happy Coding! πŸ‘©β€πŸ’»

Top comments (18)

Collapse
 
ant_f_dev profile image
Anthony Fung

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!

Collapse
 
jonathanbc10 profile image
Jonathan B.

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

Collapse
 
dragosdev profile image
Dragos Barbuta

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

Enter fullscreen mode Exit fullscreen mode

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! πŸš€πŸ‘¨β€πŸ’»

Collapse
 
pcockerell profile image
Peter Cockerell

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.

Collapse
 
dragosdev profile image
Dragos Barbuta

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?

Thread Thread
 
pcockerell profile image
Peter Cockerell

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.

Collapse
 
insertish profile image
insert

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.

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘

Collapse
 
jasmin profile image
Jasmin Virdi

Thank you supporting and sharing the article!πŸ™Œ

Collapse
 
bryan5 profile image
Bryan Quiroz

I actually like this new features!

Collapse
 
asadravian profile image
Muhammad Asadullah (Asad)

Massive!! Thank you!

Collapse
 
wilmela profile image
Wilmela

Thanks for sharing.

Collapse
 
xgqfrms profile image
xgqfrms

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}

Enter fullscreen mode Exit fullscreen mode
Collapse
 
weijuer profile image
Weijuer

ε†™ηš„ηœŸζ£’

Collapse
 
shariar-hasan profile image
Shariar Hasan

great πŸ™‚

Collapse
 
Sloan, the sloth mascot
Comment deleted