How to Sort an Array

JavaScript offers four different methods that allow you to sort the array, sort(), toSorted(), reverse(), and toReversed().

Sorting string arrays

By default, these methods are used to sort arrays with string values.

• sort() is a mutating method that sorts the array alphabetically.

let arr = ["Apple", "Orange", "Banana"];
 
arr.sort();
console.log(arr); // -> [ 'Apple', 'Banana', 'Orange' ]

• reverse() is a mutating method that reverses the array based on its original order.

let arr = ["Apple", "Orange", "Banana"]; // -> [ 'Banana', 'Orange', 'Apple' ]
 
arr.reverse();
console.log(arr);

• toSorted() is just like sort(), except it is non-mutating. It returns the sorted result without altering the original array.

let arr = ["Apple", "Orange", "Banana"];
 
let sortedArr = arr.toSorted();
 
console.log(sortedArr); // -> [ 'Apple', 'Banana', 'Orange' ]
console.log(arr); // -> [ 'Apple', 'Orange', 'Banana' ]

• toReversed() method is just like reverse(), except it is non-mutating. It returns the sorted result without altering the original array.

let arr = ["Apple", "Orange", "Banana"];
 
let sortedArr = arr.toReversed();
 
console.log(sortedArr); // -> [ 'Banana', 'Orange', 'Apple' ]
console.log(arr); // -> [ 'Apple', 'Orange', 'Banana' ]

Sorting number arrays

The sort() method can also be used to sort numbers, with a bit more customization.

Because by default, sort() will convert the numbers into strings, and then sort them alphabetically, which would give results like this:

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
 
console.log(arr.toSorted()); // -> [ -1, 17,  2, 20, 21,  3, 45,  9 ]

This doesn't make sense at all mathematically.

To sort numbers, you must pass a compare function.

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
 
arr.sort(compareFunction);
 
function compareFunction(a, b) {
  return a - b;
}
 
console.log(arr); // -> [ -1,  2,  3,  9, 17, 20, 21, 45 ]

The compare function takes two input values, a and b, and return either a positive value, a negative value, or 0.

• If the function returns positive, b will be placed before a.
• If the function returns negative, a will be placed before b.
• If the function returns 0, no changes will be made.

The function compares all the values in the array, two numbers at a time.

Let's take a look at how this works with our example array, step by step. For the first comparison, the first two elements will be assigned a and b.

And because the comparison function returns a positive result, a and b will be swapped.

Next, sort() will move on to and compare the next two elements.

And this time, since a-b returns negative, a and b will not be swapped.

This process will be repeated over and over again, until sort() goes through all the elements in the array.

The example sorts the array in an ascending order. To sort in the descending order, simply make the compare function return b - a.

let arr = [2, -1, 45, 3, 21, 17, 9, 20];
 
arr.sort(compareFunction);
 
function compareFunction(a, b) {
  return b - a;
}
 
console.log(arr); // -> [ 45, 21, 20, 17, 9,  3,  2, -1 ]