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 }
]

sravankumar_171fa07058

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-sort