Exploring the Future: A Sneak Peek into ECMAScript 2023's New Array Methods

Exploring the Future: A Sneak Peek into ECMAScript 2023's New Array Methods

The ECMAScript 2023 specification has been recently finalized, and it includes some new methods on the Array object that will help make our JavaScript programs more predictable and maintainable. The methods findLast, and findLastIndex will behave the same as Array.prototype.find and Array.prototype.findIndex but would iterate from the last to the first. And the methods toSorted, toReversed, toSpliced, and with allow you to perform operations on arrays without changing the data in place, but by making a copy and changing that copy.

Array find from the last methods

findLast

The array.findLast() method iterates the array in reverse order and returns the value of the first element that satisfies the provided testing function. If no elements satisfy the testing function, undefined is returned.

const array = [1, 5, 3, 2, 4];

const lastEvenNumber = array.findLast(x => x % 2 === 0);

console.log(lastEvenNumber); // 2

findLastIndexOf

The array.findLastIndexOf() method iterates the array in reverse order and returns the index of the first element that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned.

const array = [1, 5, 3, 2, 4];

const lastIndexOfEvenNumber = array.findLastIndexOf(x => x % 2 === 0);

console.log(lastIndexOfEvenNumber); // 3

Change Array by copy methods

toSorted

The toSorted method returns a new array with the elements sorted in ascending order. This is equivalent to calling the sort method, but it does not mutate the original array.

const array = [1, 5, 3, 2, 4];

const sortedArray = array.toSorted();

console.log(sortedArray); // [1, 2, 3, 4, 5]

toReversed

The toReversed method returns a new array with the elements in reverse order. This is equivalent to calling the reverse method, but it does not mutate the original array.

const array = [1, 5, 3, 2, 4];

const reversedArray = array.toReversed();

console.log(reversedArray); // [5, 4, 3, 2, 1]

toSpliced

The toSpliced method returns a new array with the elements from the specified range spliced out. This is equivalent to calling the splice method, but it does not mutate the original array.

const array = [1, 5, 3, 2, 4];

const splicedArray = array.toSpliced(1, 2);

console.log(splicedArray); // [1, 4]

with

The with method allows you to create a new array with the elements of the original array, but with the specified values applied to each element. This is equivalent to calling the map method, but it does not mutate the original array.

const array = [1, 5, 3, 2, 4];

const withArray = array.with(x => x * 2);

console.log(withArray); // [2, 10, 6, 4, 8]

Conclusion

These new methods are a great way to make our JavaScript programs more predictable and maintainable. By using these methods, we can avoid mutating the original array and causing unexpected side effects.

And you can go to tc39 GitHub repository and checkout the finished proposals for ecma262 here: https://github.com/tc39/proposals/blob/HEAD/finished-proposals.md