Blog

I recently had to figure out how to use JavaScript sort to order objects by date property. JavaScript sort method is available on array objects in JavaScript. It mutates the array, which means it modifies the elements of the array while sorting. The sort method has excellent support across all browsers. This makes it a great candidate to use for sorting an array of objects.

Let’s look at how to use the built-in Array.sort method to sort an array of objects by date in descending or ascending order.

JavaScript sort array syntax

myArray.sort([compareFunction]);Code language: JavaScript (javascript)

As you can see above, the sort method takes in a single optional parameter called compareFunction. If you don’t supply a function, it converts each element to a string for comparison using code point.

var foo = [9, 30, 5, 'what', 'the'];
foo.sort(); // returns [30, 5, 9, 'the', 'what']Code language: JavaScript (javascript)

Notice anything weird? JavaScript sort converts each element to string and applies alphabetical sorting.

Implementing a custom compare function

Since sorting dates with string representations is not a great idea, we will implement the compareFunction for sorting arrays by date property.

The syntax is below:

function compare(firstElement, secondElement) {
  // must return a number
}Code language: JavaScript (javascript)

The compare function above must return a number. Depending on the number returned, JavaScript sort method will adjust the position of elements.

1. If the result is less than 0, firstElement comes first.
2. If the result is 0, it leaves firstElement and secondElement unchanged with respect to each other, but sorted with respect to all other elements.
3. If the result is greater than 0, secondElement comes first.

It is worth noting the function above ignores all undefined elements of the array.

By default, it places all undefined elements at the end after sorting the array.

Sort by date in ascending order

Having explored the sort method syntax, we apply sorting in descending order.

var friends = [
   { name: 'Middle-aged John', dateOfBirth: new Date(1995, 5, 19)},
   { name: 'Young John', dateOfBirth: new Date(2000, 1, 22)},
   { name: 'Old John', dateOfBirth: new Date(1990, 3, 10)},
];

friends.sort(function (a, b) {
  if (a.dateOfBirth > b.dateOfBirth) return 1;
  if (a.dateOfBirth < b.dateOfBirth) return -1;
  return 0;
});

console.log(friends);
// Prints in order: Old John, Middle-aged John, Young JohnCode language: JavaScript (javascript)

Sort by date in descending order

We can reverse the sort order simply by inverting the return value of the function.

var friends = [
   { name: 'Middle-aged John', dateOfBirth: new Date(1995, 5, 19)},
   { name: 'Young John', dateOfBirth: new Date(2000, 1, 22)},
   { name: 'Old John', dateOfBirth: new Date(1990, 3, 10)},
];

friends.sort(function (a, b) {
  if (a.dateOfBirth > b.dateOfBirth) return -1;
  if (a.dateOfBirth < b.dateOfBirth) return 1;
  return 0;
});

console.log(friends);
// Prints in order: Young John, Middle-aged John, Old JohnCode language: JavaScript (javascript)

Summary

We have just implemented JavaScript sort to order an array of objects by date property. We learned how to implement custom comparison using the sort method.

If you have any questions, feel free to drop a line below.