ES14 introduced Array immutable methods, which do not change the original array, return a new array after modification
With the ES14 version, Array.prototype added with the below methods
- toSorted
- toReversed method
- toSpliced method
- with Method
ES14 Array toSorted Method
Array contains sort method, ES14 added toSorted method to an array.prototype.
So, What is the difference between sort and toSorted methods?
sort and toSorted method sorts an array in ascending order by default.
sort method mutates an original array, toSorted does not mutates an original array, returns a new array
syntax
Array.prototype.sort([comparator])
Array.prototype.toSorted([comparator])
The syntax is the same for both these methods, Comparator used to customize the sorting order
Below examples, the original array is sorted with the sort method
const numbers = [2, 5, 7, 10, 13]
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
// Array sort ascending using sort method
numbers.sort();
console.log(numbers) // 👉🏼 [10, 13, 2, 5, 7]
Below examples, the original array is not sorted, after using toSorted method
const numbers = [2, 5, 7, 10, 13]
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
// Sort using sort method
numbers.toSorted();
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
sort vs toSorted Comparision array example:
const numbers = [2, 5, 7, 10, 13]
// Sort using sort method
console.log(numbers === numbers.sort()); //👉🏼 true
console.log(numbers.toSorted())
// Sort using toSorted method
console.log(numbers === numbers.toSorted()); // 👉🏼 false
toSorted ascending and descending order example
toSorted takes the comparator and compares each element and return order.
const numbers = [2, 5, 7, 10, 13]
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
// toSorted ascending order
const ascendingResult=numbers.toSorted((first, second) => {
return first - second;
});
console.log(ascendingResult) // 👉🏼[2, 5, 7, 10, 13]
// toSorted descending order
const descendingResult = numbers.toSorted((first, second) => {
return second - first;
});
console.log(descendingResult); // 👉🏼 [13, 10, 7, 5, 2]
Let’s see how to sort an array of objects using toSorted method
const students = [
{ name: "one", id: 1 },
{ name: "two", id: 2 },
{ name: "three", id: 3 },
{ name: "four", id: 4 }
];
// Sort using toSorted method: returns sorted array
const sortedStudents = students.toSorted((a, b) => {
return a.name.localeCompare(b.name);
});
console.log(sortedStudents);
//[{name: "four", id: 4},{name: "one", id: 1},
//{name: "three", id: 3},{name: "two", id: 2}]
// Sort using sort method: mutates original array
students.sort((a, b) => {
return a.name.localeCompare(b.name);
});
console.log(students)
//[{name: "four", id: 4},{name: "one", id: 1},
//{name: "three", id: 3},{name: "two", id: 2}]
ES14 Array toReversed Method
toReserved is reverse an array of elements similar to reverse() function.
reverse(): It mutates an original array
toReserved(): It is immutable and returns a new array.
This method takes comparator, the same as reverse() method.
const numbers = [2, 5, 7, 10, 13]
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
// toReversed reverse order, return new array
const reverseNumbers=numbers.toReversed();
console.log(reverseNumbers) // 👉🏼[13, 10, 7, 5, 2]
// reverse order, mutates original array
console.log(numbers.reverse()) // 👉🏼[13, 10, 7, 5, 2]
Array.prototype.with method in ES14
with() method is used to update a single element for a given index and returns a new array.
It is similar to array[index] assignment syntax, which changes the original array.
const numbers = [2, 5, 7, 10, 13]
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
// with modifies a single element, return new array
const result=numbers.with(0,11)
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
console.log(result) // 👉🏼[11, 5, 7, 10, 13]
// [index] modifies a single element, and return same array
numbers[0]=11;
console.log(numbers) // 👉🏼 [11, 5, 7, 10, 13]
ES14 Array.prototype.toSpliced method
toSpliced is similar to the splice method in the array, adds new elements in the middle of an array.
splice() method mutates the original array, toSpliced returns a new array, the original array does not modify it.
const numbers = [2, 5, 7, 10, 13]
console.log(numbers) // 👉🏼[2, 5, 7, 10, 13]
// toSpliced adds an multiple elements in middle of original array
const result=numbers.toSpliced(2,1,20,25)
console.log(numbers) // 👉🏼 [2, 5, 7, 10, 13]
console.log(result) // 👉🏼 [2, 5, 20, 25, 10, 13]
numbers.splice(2,1,20,25)
// splice adds an multiple elements in middle of original array
console.log(numbers) // 👉🏼 [2, 5, 20, 25, 10, 13]