Sorting numbers in JavaScript using the sort function

Sorting numbers in JavaScript

On my first attempt, I thought that sorting numbers in javascript using the sort function doesn’t work. Here is what I did:-

numbers = [2, 22, 4, 12, 10, 7];
numbers.sort();
//Results [10, 12, 2, 22, 4, 7]

Normally, you expect to get [2, 4, 7, 10, 12, 22]. But instead, we got [10, 12, 2, 22, 4, 7] . What is going on?

The default JavaScript sorting doesn’t work?

No, no. The default JavaScript sorting works just fine. It just sorts everything as a string.

Yes, that is what is going on. JavaScript is just treating every number in the array as a string because the default sort is alphabetic or lexicographical.

Why? This is probably because JavaScript arrays can contain any type. You can put numbers, objects, strings, etc in them. Therefore, JavaScript type casts each element of an array into strings and tries its best to do what is requested.

But sometimes we might need to sort numbers or a specific type of object. In this situation, we have to explicitly tell JavaScript to do so.

How do we explicitly inform JavaScript to sort numbers as numbers?

Therefore, to accomplish sorting numbers in JavaScript we need to explicitly inform it to do the sorting numerically. We do this using a comparison callback function. The prototype sort function accepts a callback function as an argument that can specify how to sort the numbers. Here is how:-

numbers.sort(comparisonCallbackFunction);

Now, we just have to write the `comparisonCallbackFunction`. So this function accepts two numbers that need to be compared. Then, it returns either 1, 0, -1 depending on if the first number is greater than, equal or less than the second number respectively. Let’s see it in action:-

function comparisonCallbackFunction(num1, num2) {
   if(num1 > num2) return 1;
   if(num1 == num2) return 0;
   if(num1 < num2) return -1;
}

Finally, we can put this function to use by passing it to the sort function.

numbers = [2, 22, 4, 12, 10, 7];
numbers.sort(comparisonCallbackFunction);
//Results [2, 4, 7, 10, 12, 22];

Yes. That works and we got the result we expect.

How the sorting function and it’s callback function work

But what is going on? Okey, the array sort function uses its own algorithm to compare each adjacent element and decide what order they should be in. Plus, it offers us a way to make modifications in the technique the adjacent elements are compared by allowing us to pass a callback function. And that is exactly what we did.

To reiterate, the comparison callback function accepts two elements. These are the two adjacent elements in the array the sorting algorithm will compare. We also said it returns either -1, 0, or 1. But it is not necessary that it returns -1 or 1, it can be any negative or positive number. That means, instead of explicitly returning -1, 0, or 1 we can just return the result of num1 - num2. And it will either return a zero, negative or positive number.

Hence our comparison array function can become a lot more cleaner.

function comparisonCallbackFunction(num1, num2) {
   return num1 - num2;
}

Additionally, we can just use an anonymous function instead of a named function like above. Hence our code can become a lot shorter and cleaner.

numbers.sort(function(num1, num2) => {return num1 - num2});

Furthermore, we can apply arrow functions and make it even cleaner.

numbers.sort((num1, num2) => num1 - num2);

How about sorting numbers in JavaScript descendingly

As you have probably noticed we have been doing the sorting in ascending order. And to reverse the sort ordering descendingly we just have to modify our comparison function just a little bit.

function comparisonCallbackFunction(num1, num2) {
   if(num1 > num2) return -1;
   if(num1 == num2) return 0;
   if(num1 < num2) return 1;
}

Similarly, we can change the position of num1 and num2 in our anonymous functions.

Your subscription could not be saved. Please try again.
Your subscription has been successful.

Learn Modern JS, CSS, & PHP

Subscribe to learn modern PHP in the most simple way.