JavaScript continues to improve and evolve over the years, and for good reason: each new version of the most popular programming language for web developers brings its share of innovations thanks to ECMAScript (ES).
ECMAScript is the standard that defines JavaScript specifications. In other words, it's a kind of group that dictates the rules and functions available with JavaScript. Each version of ECMAScript brings new features that improve the language.
In the ECMAScript 2023 (ES14) version, several very useful methods for arrays (Array objects) have been introduced.
These new methods are primarily five:
array.findLast()array.toSorted()array.with()array.toReversed()array.toSpliced()
1. The array.findLast() method
The findLast() method works similarly to find() (which allows finding an element corresponding to our search), but with a key difference: it traverses the array in reverse, that is, from end to beginning.
It is therefore very useful for finding the last element that satisfies our condition.
Syntax
const result = array.findLast("element");Example
const numbers = [1, 2, 3, 4, 5, 6, 7];
// Find the last even number in the array
const dernier = numbers.findLast(num => num % 2 === 0);
console.log(dernier); // 6
2. The array.toSorted() method
The toSorted() method creates a new sorted copy of the array without modifying the original.
Unlike sort(), which is destructive, toSorted() respects immutability, which is excellent news for developers who prefer functional approaches.
In programming, a destructive operation directly modifies the value or structure of data, for example by changing an existing array with the sort() method.
Immutability, on the other hand, guarantees that data cannot be modified once created; any operation returns a new copy of the data without altering the original (as with the toSorted() method).
The functional approach relies on immutability, favoring functions that do not modify the global state (we call these pure functions 😉), making the code more predictable and easier to debug.
Syntax
const sortedArray = array.toSorted(unsortedArray);Example
const unsortedArray = [3, 1, 4, 1, 5, 9];
const sortedArray = unsortedArray.toSorted((a, b) => a - b); // Sort from smallest to largest
console.log(sortedArray); // [1, 1, 3, 4, 5, 9]
3. The array.with() method
This method allows replacing a specific element inside an array, while creating a modified copy without changing the original array (we're talking about immutability, you know that now! 😬).
Syntax
const newArray = array.with(index, newValue);Example
const fruits = ["apple", "banana", "cherry"];
const newFruits = fruits.with(1, "orange"); // Arrays start at 0
console.log(newFruits); // ["apple", "orange", "cherry"]
4. The array.toReversed() method
The toReversed() method returns a reversed version of an array without modifying the original.
Unlike the reverse() method, which directly modifies the array, toReversed() creates a copy to ensure that the original array remains unchanged: another immutable method. 😗
Syntax
const reversedArray = array.toReversed();Example
const letters = ['a', 'b', 'c'];
const reversedLetters = letters.toReversed();
console.log(reversedLetters); // ['c', 'b', 'a']
5. The array.toSpliced() method
This method allows removing and/or inserting elements in an array, but like the other methods introduced with ES 2023, it creates a new copy of the array without modifying the original.
Syntax
const splicedArray = array.toSpliced(start, delete, ...newItems);Example
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.toSpliced(2, 1, 6, 7);
console.log(newNumbers); // [1, 2, 6, 7, 4, 5]A few important clarifications:
2- We insert new elements at index 2 (so at the third position)1- We remove a single value (so the 3 from the array)6, 7- We add elements 6 and 7
So we end up with an array where 3 is removed while integrating 6 and 7 before the original numbers 4 and 5.
Conclusion
These five new methods allow manipulating arrays while preserving their immutability (we discovered this together 😄), which is essential.
If you want to go even further, take a look at our entire course dedicated to JavaScript: it's a gem!
