JavaScript New Arrays Methods: ECMAScript 2023

Introduction

As the world of web development evolves, so does the JavaScript language. With each new version of ECMAScript, we are introduced to exciting features and improvements that enhance the way we write code. In ECMAScript 2023, JavaScript has introduced several new array methods that make working with arrays even more powerful and efficient.
In this blog post, we will explore five new array methods introduced in ECMAScript 2023, namely toSorted(), toSpliced(), toReversed(), findLast(), and findLastIndex(). We will also discuss how they differ from their existing counterparts.

1. findLastIndex()

The findLastIndex() method returns the index of the last element in the array that satisfies the provided testing function. If no element matches the condition, it returns -1.

Example:

const scores = [90, 85, 95, 70, 80];
const lastIndexAbove80 = scores.findLastIndex((score) => score > 80);

console.log(lastIndexAbove80); // Output: 2 (index of element 95)

2. toReversed()

The toReversed() method returns a new array with the elements in reverse order compared to the original array. Like the previous methods, this one also leaves the original array unchanged.

Example:

const letters = ["a", "b", "c", "d"];
const reversedLetters = letters.toReversed();

console.log(reversedLetters); // Output: ["d", "c", "b", "a"]

3. toSpliced()

The toSpliced() method returns a new array with a specified number of elements removed from the original array, starting at the specified index. Like toSorted(), this method does not modify the original array and returns a new one.

Example:

const numbers = [1, 2, 3, 4, 5];
const splicedNumbers = numbers.toSpliced(1, 2, 8, 9);

console.log(splicedNumbers); // Output: [1, 8, 9, 4, 5]

4. toSorted()

The toSorted() method is used to return a new sorted array based on the elements of the original array. This method does not modify the original array; instead, it creates a new one with the sorted elements.

Example:

const fruits = ["banana", "apple", "orange", "grapes"];
const sortedFruits = fruits.toSorted();

console.log(sortedFruits); // Output: ["apple", "banana", "grapes", "orange"]

5 findLast()

The findLast() method returns the last element in the array that satisfies the provided testing function. If no element matches the condition, it returns undefined.

Example:

const numbers = [10, 20, 30, 40, 50];
const lastEvenNumber = numbers.findLast((num) => num % 2 === 0);

console.log(lastEvenNumber); // Output: 40

Differences from Existing Methods

It's important to note that the new array methods introduced in ECMAScript 2023 have similarities with some existing methods but have subtle differences that can be advantageous in certain scenarios.

toSorted() vs. sort()

Both toSorted() and sort() are used for sorting arrays. However, sort() modifies the original array in place, while toSorted() returns a new sorted array, leaving the original array unchanged.

toSpliced() vs. splice()

Similar to the sorting methods, splice() alters the original array, while toSpliced() returns a new array with elements removed, without modifying the original array.

toReversed() vs. reverse()

Just like sort() and splice(), reverse() modifies the original array in place, reversing the order of elements. On the other hand, toReversed() returns a new array with elements in reverse order without altering the original array.

findLast() and findLastIndex() vs. lastIndexOf() and findIndex()

While lastIndexOf() and findIndex() return the first occurrence index of an element matching the condition, findLast() and findLastIndex() return the last occurrence index or element that satisfies the condition, respectively.

Conclusion:

In conclusion, ECMAScript 2023 brings these new array methods to make array manipulation more convenient and efficient. By leveraging these methods, developers can create cleaner and more concise code without directly modifying the original arrays. As with any new feature, it's essential to understand how they work to make the most of their capabilities and use them effectively in your JavaScript projects.

Happy coding💻!

Feel Free to comment your thoughts regarding the topic

Connect with me on Twitter, Linkedinand GitHub to stay updated and join the discussion!