Sorting methods in JS

Sorting methods are used to sort an array(of numbers/strings/characters) or strings in either ascending or descending order. Also an array of objects can be sorted based on some property.
The popular method in javascript for this purpose is sort() but which has its disadvantages also as it can provide wrong results sometimes too so to be absolutely sure that sorting work as expected, we will use sort function with a comparator callback something like this sort(comparatorFunction), which can be used for both ascending and descending order perfectly.
It changes the same array so it does not return a new array.

Sort() without comparator callback causing error:

I will show 2 examples, one which is working and other which is causing error as it is not sorting in proper ascending order. Because of this error we will not use this approach in our day to day code but use sort with a comparator function, which we study next.

// sort fn working
const numbersList = [3, 2, 1, 5, 4];
 numbersList.sort();
console.log(numbersList); // Output: [ 1, 2, 3, 4, 5 ]

// sort fn not working as expected
let numList = [2, 11, 5, 22, 6, 10, 3, 7, 6, 4, 6].sort();
console.log(numList); // Output: [10, 11, 2, 22, 3,4,  5, 6,  6, 6,7]

Sort() with comparator callback function:

Sort() with comparator callback function will look something like below for both ascending order and descending order.

// sorting in ascending order
sort(function(a, b) {
  return a - b;
});

// sorting in descending order
sort(function(a, b) {
  return b - a;
});

Sorting an array of numbers/strings/characters in ascending order:

Sorting an array with a comparator callback function with various examples are shown below.
For sorting an array of numbers, it is very simple but for sorting an array of characters or strings its little different in the way that in the return statement of comparator callback we return a.localeCompare(b) instead of a - b.

We could not do it with a - b in case of strings as it will take ASCII value of strings and then subtract and hence will not give correct value.
Thus a new function localeCompare will be used to correctly sort characters or strings.

// sort an array of numbers
const numbersList = [3, 2, 1, 5, 4];
 numbersList.sort(function(a, b) {
  return a - b;
});
console.log(numbersList); // Output: [ 1, 2, 3, 4, 5 ]

// sort an array of characters
const charactersList = ["e", "c", "d", "b", "a"];
charactersList.sort(function(a, b) {
  return a.localeCompare(b);
});
console.log(charactersList); // Output: ['a', 'b', 'c', 'd', 'e']

// sort an array of words
const wordsList = ["elephant", "cow", "dog", "boy", "apple"];
wordsList.sort(function(a, b) {
  return a.localeCompare(b);
});
console.log(wordsList); // Output: ['apple', 'boy', 'cow', 'dog', 'elephant']

Sorting an array of numbers/strings/characters in descending order:

For sorting an array of numbers, it is very simple, as only the return statement will be b - a here and for characters/strings we use localCompare.
Basically for ascending and descending almost everything is same except the return statement of comparator callback function.

For array of numbers
Return statement of comparator callback function in Ascending order : a - b
Return statement of comparator callback function in Descending order : b - a

For array of characters/strings
Return statement of comparator callback function in Ascending order : a.localCompare(b)
Return statement of comparator callback function in Descending order : b.localCompare(a)

// sort an array of numbers
const numbersList = [3, 2, 1, 5, 4];
 numbersList.sort(function(a, b) {
  return b - a;
});
console.log(numbersList); // Output: [ 5, 4, 3, 2, 1 ]

// sort an array of characters
const charactersList = ["e", "c", "d", "b", "a"];
charactersList.sort(function(a, b) {
  return b.localeCompare(a);
});
console.log(charactersList); // Output: [ 'e', 'd', 'c', 'b', 'a' ]

// sort an array of words
const wordsList = ["elephant", "cow", "dog", "boy", "apple"];
wordsList.sort(function(a, b) {
  return b.localeCompare(a);
});
console.log(wordsList); // Output: [ 'elephant', 'dog', 'cow', 'boy', 'apple']

Sorting a collection of items(array of objects) in ascending order:

Sorting an array of numbers/characters/string is same as array of object except arguments a and b in comparator callback function in array of object case means an object and hence need to specify by which property sorting should happen.
Basically sorting in this case is by objects property itself and same goes for descending order too.

In this below example, objects in students array is sorted in ascending order by age property meaning the object with minimum age should come first then next bigger and so on.
Also please note that while sorting an array of object by string property we are using localCompare.

// sort an array of object by age property, age is number
const peoples = [
  { name: 'John', age: 21 },
  { name: 'Alice', age: 19 },
  { name: 'Bob', age:  23}
];

peoples.sort(function(a, b) {
  return a.age - b.age;
});

output:
[
  { name: 'Alice', age: 19 },
  { name: 'John', age: 21 },
  { name: 'Bob', age: 23 }
]

// sort an array of object by name property, neame is string
const peoples = [
  { name: 'John', age: 21 },
  { name: 'Alice', age: 19 },
  { name: 'Bob', age: 23 }
];

peoples.sort(function(a, b) {
  return a.name.localeCompare(b.name);
});

output:
[
  { name: 'Alice', age: 19 },
  { name: 'Bob', age: 23 },
  { name: 'John', age: 21 }
]

Sorting a collection of items(array of objects) in descending order:

Now i will not give example for this case as for descending order, just change:

in case of sorting(desc) by number property of object, use: b - a
in case of sorting(desc) by string property of object, use: b.localCompare(a)

Prev Next