How to do complex sorting in Javascript

In this blog post I want to show you how to sort in Javascript using a compare function. With this knowledge you can easily sort complex objects by arbitrary properties. Sorting an array in Javascript is easy. You just have to call sort() on the array.

var array = [23,42,77,1,13,36];
console.log(array);
console.log(array.sort());
 Array before and after the sort

Array before and after the sort

This works with number as well as with strings.

var array = ['Jack', 'John', 'Michael', 'Chris'];
console.log(array);
console.log(array.sort());
 Array before and after the sort

Array before and after the sort

Now imagine an array that contains objects. Now a simple sort can not work anymore. How should the interpreter know which property should be used to sort the objects? Look at the following example: 

var array = [
{
    firstname: 'Jack',
    lastname: 'Miller',
    age: 25,
    gender: 'm'
},{
    firstname: 'John',
    lastname: 'Jackson',
    age: 28,
    gender: 'm'
},{
    firstname: 'Jack',
    lastname: 'Evans',
    age: 21,
    gender: 'm'
},{
    firstname: 'Chris',
    lastname: 'Schulz',
    age: 32,
    gender: 'm'
}];
console.log(array);
console.log(array.sort());
 An array of objects won't change if you just use sort()

An array of objects won't change if you just use sort()

If you execute the code you will realise that the array won't change. The interpreter does not throw an error but your sort() call was essentially useless. If you look at the documentation of the sort() function you see that you can pass a compare function to it. This method takes two parameters a and ba and b stand for two elements of the array. Instead of comparing the two elements by using the standard operators your compare function will be called. The following code snippet shows a very simple compare function that compares integers. In reality you wouldn't need this compare function since sort() can sort integers by default.

var array = [23,42,77,1,13,36];
var compareIntegers = function(a,b){
    if(a<b){
        return -1;
    }
    if(a>b){
        return 1;
    }
    return 0;
}
console.log(array);
console.log(array.sort(compareIntegers));

As mentioned before two values of the array are passed to the compare function. Your code should now compare these values and return an integer value that signals which value is bigger. There are three cases:

  • Case 1 [a is smaller as b]: return a negativ value
  • Case 2 [a is a bigger value]: return a positive value
  • Case 3 [a is equal to b]: return 0

Since we are comparing integers here we can reduce the compare function to a single line.

var array = [23,42,77,1,13,36];
var compareIntegers = function(a,b){
    return a-b;
}
console.log(array);
console.log(array.sort(compareIntegers));

Now let us go back to sorting objects. Knowing about the compare function makes sorting the objects easy, too. Assume you want to sort the objects by lastname, then by firstname and then by age. 

var compareObjects = function(a,b){
    if(a.lastname < b.lastname){
        return -1;
    }
    if(a.lastname > b.lastname){
        return 1;
    }
    if(a.firstname < b.firstname){
        return -1;
    }
    if(a.firstname > b.firstname){
        return 1;
    }
    return a.age - b.age;
}
console.log(array);
console.log(array.sort(compareObjects));
 Sorted array of objects

Sorted array of objects

This is still a very simple method and as your objects grow more complex your compare function will grow, too. But the concept still works. You can find the source code of the snippets in the JSFiddle embedded below. Please leave a comment or tweet at me if you have found an error or have an idea to improve the blog post.