One thing that is not extremely obvious in JavaScript is how you sort arrays. Yes, of course I know that arrays have the native sort() function, but did you know that the following will incorrectly sort the array of numbers:


var arr = [1,2,3,10,101,1000];
alert(arr.sort());  // 1,10,1000,101,2,3

How crazy is that? Even though the array is in the correct order, the sort() function reorders it incorrectly. Why does it do this? It orders it this way because it actually sorts all elements within the array as if they are strings, not numbers.

Comparison Function Needed

In order to properly sort an array, you need to make sure you have a comparison function for comparing the elements within the array. The function must take two parameters which can be any two elements from the array. The function should return a negative number if the first parameter should appear before the second parameter. The function should return a 0 if the two parameters are equivalent. The function should return a positive number if the first parameter should appear after the second. The following is a comparison function that works for numbers:


function cmpNumbers(a, b) {
  return a - b;
}
[code language="javascript"]

To use this function to allow for sorting arrays of numbers, you can do the following to incorporate your new comparison function in the sort:
[code language="javascript"]
var arr = [1,10,1000,101,2,3];
arr.sort(cmpNumbers);
alert(arr);  // 1,2,3,10,101,1000

Imagine that you have an array of Person objects that you want to sort. If you want sort the Person objects by last names, you can use code such as the following:


// Definition for the Person object
function Person(fullName) {
  this.fullName = fullName;
  this.firstName = fullName.split(" ")[0];
  this.lastName = fullName.split(" ").slice(-1)[0];
}
Person.prototype.toString = function() {
  return this.fullName;
};

// for sorting last_name, first_name
function cmpPersonLastFirst(a, b) {
  return a.lastName != b.lastName
    ? a.lastName < b.lastName ? -1 : 1
    : (a.firstName != b.firstName
      ? a.firstName < b.firstName ? -1 : 1
      : 0
    );
}

// The array of people to be sorted
var people = [];
people.push(new Person("Michael Villegas"));
people.push(new Person("Vanessa Garcia"));
people.push(new Person("Jonathan Villegas"));
people.push(new Person("Anton Sheehan"));
people.push(new Person("Melissa Johnson"));
people.push(new Person("Sarah Rush"));
people.push(new Person("Sarah Baranski"));

// Sort the array of people (last name, first name)
people.sort(cmpPersonLastFirst);

// Show the people in order of last name
alert("This is the array of sorted people:\n -"
      + people.join("\n- "));

Here is what will be outputted:


This is the array of sorted people:
 -Sarah Baranski
- Vanessa Garcia
- Melissa Johnson
- Sarah Rush
- Anton Sheehan
- Jonathan Villegas
- Michael Villegas

Cool stuff, right? Now, hopefully you can see with these two examples how you can optionally supply a comparison function to the sort() function in order to sort an array of any type of object.


Leave a Reply

Your email address will not be published. Required fields are marked *