October 1, 2021
Es2021 Features part1
The latest JS standard while I’m writing is Ecmascript 2023, shortly ES14. It includes several functions to manage arrays. Let’s see them.
toSorted()
It’s just like the old sort() but it creates a new array.
Let’s write an array with the best Billy Wilder’s movies:
const movies = ['The Apartment','Irma La Douce','Kiss Me Stupid','The Fortune Cookie','The Front Page']
Both sort() and toSorted() will produce the same result (movies are sorted alphabetically). But with toSorted() the original variable will not change.
movies.sort()
// ['Irma La Douce', 'Kiss Me Stupid', 'The Apartment', 'The Fortune Cookie', 'The Front Page']
console.log(movies);
// ['Irma La Douce', 'Kiss Me Stupid', 'The Apartment', 'The Fortune Cookie', 'The Front Page']
// Original array is now sorted
movies.toSorted()
// ['Irma La Douce', 'Kiss Me Stupid', 'The Apartment', 'The Fortune Cookie', 'The Front Page']
console.log(movies);
// ['The Apartment','Irma La Douce','Kiss Me Stupid','The Fortune Cookie','The Front Page']
// Original array is still not sorted
toSorted() just like sort() can have a function as an argument to customize the sorting (Used to sort array of object mainly).
movies.toSorted((a, b) => {
return whatever;
});
toReversed()
Same as toSorted() goes for toReversed() for array reverse, it’s the old reverse() but produces a new array
movies.reverse()
// ['The Front Page', 'The Fortune Cookie', 'Kiss Me Stupid', 'Irma La Douce', 'The Apartment']
console.log(movies);
// ['The Front Page', 'The Fortune Cookie', 'Kiss Me Stupid', 'Irma La Douce', 'The Apartment']
// Original array is now reverse sorted
movies.toReversed()
// ['The Front Page', 'The Fortune Cookie', 'Kiss Me Stupid', 'Irma La Douce', 'The Apartment']
console.log(movies);
// ['The Apartment','Irma La Douce','Kiss Me Stupid','The Fortune Cookie','The Front Page']
// Original array is still not sorted
toSpliced()
toSpliced() is the new splice() for creating new arrays. I don’t have to explain it again, have I?
movies.toSpliced(4, 0, 'The Private Life of Sherlock Holmes')
// ['The Apartment', 'Irma La Douce', 'Kiss Me Stupid', 'The Fortune Cookie', 'The Private Life of Sherlock Holmes', 'The Front Page']
with()
This is nice. With with() method you can replace a single item of an array selected by its index. In the sample above it replaces the value of the item with index 2 (‘Kiss Me Stupid’).
const movies = ['The Apartment','Irma La Douce','Kiss Me Stupid','The Fortune Cookie','The Front Page']
movies.with(2, 'index 2 in now replaced!')
// ['The Apartment', 'Irma La Douce', 'index 2 in now replaced!', 'The Fortune Cookie', 'The Front Page']
findLast()
findLast() will return the last item in Array that matches the given condition or undefined. For example if you want the last Billy Wilder’s movie before 1970 you can easily write:
const years = [1960, 1963, 1964, 1966, 1974];
years.findLast((year) => year < 1970);
// 1966
Of course, it also works with array of objects:
const movies = [
{'The Apartment': 1960},
{'Irma La Douce': 1963},
{'Kiss Me Stupid': 1964},
{'The Fortune Cookie': 1966},
{'The Front Page': 1974}
]
movies.findLast((movie) => Object.values(movie).shift() < 1970);
// {Kiss Me Stupid: 1964}
Pay attention. the sorting order matters! If you change the order of your movies array the result will completely change. This means that findLast() is more powerful in combination with toSorted()
findLastIndex()
It’s the same as findLast() but returns just the index of the last item that matches the given condition. If nothing is found it returns -1.
const years = [1960, 1963, 1964, 1966, 1974];
years.findLastIndex((year) => year < 1970); // 3
console.log(years[3]) // 1966
All these methods have a quite good support on modern browsers and can be used immediately.