Sort an Array in JavaScript
This article will show you how to sort a JS array.
1. Using array.sort() Method
To sort an array in JavaScript, we can use array.sort() method. This method sorts the elements alphabetically in ascending order.
let arr = ["JS", "HTML", "CSS"];
arr.sort()
console.log(arr);
Output
[ 'CSS', 'HTML', 'JS' ]
Please refer to the JavaScript Array Tutorial for a comprehensive understanding of JavaScript Arrays.
Using Comparator function
Sorting a numeric array involves using a coparator funtion with the JS array.sort() method.
const arr = [ 10, 20, 25, 100 , 40]
console.log(arr.sort((a,b) => a - b))
Output
[ 10, 20, 25, 40, 100 ]
Please go through this How to Sort Numeric Array using JavaScript?, to know how the javascript array sort function works.
Using Custom Functions
Sorting the complex arrays (e.g., array of objects ) with custom functions based on the object property.
// 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 comparision function for object property
arr.sort((a, b) => a.age - b.age);
console.log(arr);
// Sort object for names
arr.sort((a, b) => a.name.localeCompare(b.name));
console.log(arr);
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: 'Rohi...
2. Using array.toSorted() Method
JS array.toSorted() works same as the array.sort() method but it creates a new array instead of updating the existing array.
Sorting Array of Strings
const a = ["JS", "HTML", "CSS"];
const a1 = a.toSorted();
console.log(a);
console.log(a1);
Output
[ 'JS', 'HTML', 'CSS' ]
[ 'CSS', 'HTML', 'JS' ]
Using Comparator Function
To sort the numeric array propery we have to pass a comparator function.
const arr = [ 10, 20, 25, 100 , 40]
console.log(arr.toSorted((a,b) => a - b))
Output
[ 10, 20, 25, 40, 100 ]
We can also use the algorithms for sorting like bubble sort, insertion sort etc. Check this article, Sorting Algorithms in JS, to learn more about the sorting algorithms in JavaScript.
3. Sort JS Array in Reverse Order
Change the comparator function to reverse the output
const arr = [ 10, 20, 25, 100 , 40]
console.log(arr.sort((a,b) => b - a))
Output
[ 100, 40, 25, 20, 10 ]
We can also use Array.reverse() method to sort the JS array in Descending Order
let arr = ["JS", "CSS", "HTML"];
// Sorting the array
arr.sort();
arr.reverse();
console.log(arr);
Output
[ 'JS', 'HTML', 'CSS' ]
Sorting Stability in JS array sort()
Sort stability refers a sorting algorithm preserves the relative order of elements that have equal values. A sorting algorithm is stable if, when two or more items have the same value, they remain in the same relative order after sorting.
Please go through this, is Array sort stable, to know more about the sort stability.
The ES2019 update mandates that JavaScript's Array.prototype.sort() method uses a stable sorting algorithm, ensuring equal elements maintain their original order across all major JavaScript engines.
const arr = [
{ name: "Aman", marks: 80 },
{ name: "Rajat", marks: 85 },
{ name: "Rishabh", marks: 82 },
{ name: "Amit", marks: 80 }
];
arr.sort((a, b) => a.marks - b.marks);
console.log(arr);
Output
[ { name: 'Aman', marks: 80 }, { name: 'Amit', marks: 80 }, { name: 'Rishabh', marks: 82 }, { name: 'Rajat', marks: 85 } ]
We have a complete list of Javascript Array methods, to check those please go through this Javascript Array Complete reference article.