JavaScript Array toSorted() Method
The JS arr.toSorted() method rearranges the array elements alphabetically and returns a new sorted array.
Sorting Array of Strings
const arr = ["JS", "HTML", "CSS"];
const arr1 = arr.toSorted();
console.log(arr);
console.log(arr1);
Output
[ 'JS', 'HTML', 'CSS' ]
[ 'CSS', 'HTML', 'JS' ]
Array.toSorted is the immutable version of array.sort() introduced in JavaScript with the ECMAScript 2023 (ES2023) specification. It is not supported in the old versions of ECMAScript.
Syntax: let array = arr.toSorted(compareFunction)Parameters
arr: The array to be sorted.compareFunction(Optional): A function that defines the sort order. If omitted, the array elements are sorted based on their string Unicode code points.
Return value: This method returns a new sorted array.
We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.
In Reverse Order
// Original array
let arr = ["HTML", "JS", "CSS"];
// Sort in reverse order using toSorted()
let arr1 = arr.toSorted((a, b) => b.localeCompare(a));
console.log(arr1); // Sorted in reverse order
Output
["JS", "HTML", "CSS"]Case Insensitive Sorting of Strings
Convert the string to lowecase in the comparator function.
let arr = ["HTML", "html", "css", "CSS", "JS"];
// convert strings to lowercase
let arr1 = arr.toSorted((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(arr1);
Output
[ 'css', 'CSS', 'HTML', 'html', 'JS' ]Go through this, JavaScript String Sort, to learn more about sorting string in JS
Sorting a Numeric Array in JS
Ascending Order
Array.toSorted() sorts the elements in lexicographical order whether a string or number.
const arr = [ 10, 20, 25, 100 , 40]
console.log(arr.toSorted())
Output
[ 10, 100, 20, 25, 40 ]To sort the numeric array propery we have to pass a comparator function.
const arr = [10, 20, 25, 100, 40];
// Modify comparision function
const arr1 = arr.toSorted((a, b) => a - b);
console.log(arr1);
Output
[ 10, 20, 25, 40, 100]Descending Order
Change the comparator function to sort the array in descending order.
const arr = [10, 20, 25, 100, 40];
// Modify comparision function
const arr1 = arr.toSorted((a, b) => b - a);
console.log(arr1);
Output
[ 100, 40, 25, 20, 10 ]Sorting Complex Arrays
We can use the custom comparision function to sort the complex arrays like array of objects.
// Array of people objects with different names and ages
let arr = [
{ name: 'Rahul', age: 28 },
{ name: 'Jatin', age: 25 },
{ name: 'Vikas', age: 32 },
{ name: 'Rohit', age: 35 }
];
// Custom comparison function for sorting by age
let sortedByAge = arr.toSorted((a, b) => a.age - b.age);
console.log(sortedByAge);
// Custom comparison function for sorting objects by name
let sortedByName = arr.toSorted((a, b) => a.name.localeCompare(b.name));
// Sorted by name
console.log(sortedByName);
Output
[
{ name: 'Jatin', age: 25 },
{ name: 'Rahul', age: 28 },
{ name: 'Vikas', age: 32 },
{ name: 'Rohit', age: 35 }
]
[
{ name: 'Jatin', age: 25 },
{ name: 'Rahul', age: 28 },
{ name: 'Rohit', age: 35 },
{ name: 'Vikas', age: 32 }
]
