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
Subscribe to my newsletter
Read articles from Akshat Vishwakarma directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Akshat Vishwakarma
Akshat Vishwakarma
I am Akshat Vishwakarma from India and as a front-end software developer, I am passionate about creating visually appealing and user-friendly interfaces for web and mobile applications. With a strong background in Javascript, I have experience working with React, Next.js, Redux, and Redux-Saga, as well as no-code platforms like Webflow.