sanbal13's Blog

Manipulating Array using sort() in JavaScript

Santosh Balchandran's photo
Santosh Balchandran
·

5 min read

In this blog, I am going to discuss the sort method in javascript which is handy to sort the elements of an array. The method works as expected in the case of a string array but it does not work in the expected manner in case of a number array. Let us understand this with the help of some examples.

Example of sort() on string array

let colors = ["Black", "Aqua",  "Blue", "DarkBlue", "Chocolate", 
"Coral", "Crimson",  "DarkGrey", "Brown"];
colors.sort();
console.log(colors);

Output on console :

Array(9) [ "Aqua", "Black", "Blue", "Brown", "Chocolate", "Coral", 
"Crimson", "DarkBlue", "DarkGrey" ]

Here we can see that the colors inside the colors array are sorted. This also means that the original array mutates. We can see that the colors are sorted as per the alphabetical order, as it appears in an English dictionary.

Example of sort() on number array

let numbers = [1, 4, 12, 14, 156, 265, 5, 6, 7, 8, 9];
numbers.sort();
console.log(numbers);

Output on console :

Array(11) [ 1, 12, 14, 156, 265, 4, 5, 6, 7, 8, 9]

Here we can see that, even though 12, 14, 156, 265 are greater than 4, they come before 4. Why does this happen?
Here the comparison is done character-wise(digit-wise). The numbers are first converted to strings and then compared.
The numbers 1, 12, 14, 156 all start with 1 which is smaller than 2 which is the starting digit for the number 265. Here the sorting is done as per the Unicode order.
Also, 2 is smaller than 4, 5, 6, 7, 8, and 9. Hence we get 265 before the single-digit numbers mentioned in the previous sentence. As a result, we get the above output in the console.

Thus, we have understood how we get the output for sort() in a number array. But this is not useful for us as we want the output to be in the conventional manner i.e. in ascending order or descending order.

Using the parameter compareFunction

The sort method accepts one parameter "compareFunction", which is optional. When this parameter is not passed, sort() does the sorting in the above mentioned manner. To do the sorting in the conventional manner we have to pass the compareFunction parameter to the function sort.
Let us see a code to understand this.

function compareFunction(a, b) {
       return a - b;
}
numbers.sort(compareFunction);
console.log(numbers);

Output on console :

Array(11) [ 1, 4, 5, 6, 7, 8, 9, 12, 14, 156, 265 ]

Here we can see that the numbers in the array are sorted in ascending order. For sorting the compareFunction uses the following three rules :

  1. If compareFunction(a, b) returns less than 0, sort a to an index lower than b
  2. If compareFunction(a, b) returns greater than 0, sort b to an index lower than a
  3. If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements.

In this way, the array is sorted in ascending order. To sort it in descending order we must return b - a from the compareFunction().

Hope this article was helpful.
Have a nice day!

JavaScriptsorting