How to Sort Array of Objects by Date in JavaScript
JavaScript Sort Array of Objects by Date

How to Sort Array of Objects by Date in JavaScript

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]);

As you can see above, the sort method takes in a single optional parameter called compareFunction and applies ascending order. If you don’t supply a compareFunction, the sort method converts each element to a string then compares using Unicode code point.

var foo = [9, 30, 5, 'what', 'the'];
foo.sort(); // returns [30, 5, 9, 'the', 'what']

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

Implementing a compareFunction

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

The syntax for compareFunction is below:

function compare(firstElement, secondElement) {
  // must return a number
}

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

  1. If compare returns a value less than 0, firstElement comes first.
  2. If compare returns 0, it leaves firstElement and secondElement unchanged with respect to each other, but sorted with respect to all different elements.
  3. If compare returns a value greater than 0, secondElement comes first.

It is wort noting the compareFunction ignores all undefined elements of the array. By default, the undefined elements are placed at the end after sorting the array.

Sort by Date in Descending Order

Having explored the sort method syntax, we are ready to perform sorting in descending order.

// List of our friends
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)},
];

// Sort array by date in DESCENDING order
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 John

Sort by Date in Ascending Order

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

// List of our friends
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)},
];

// Sort array by date in DESCENDING order
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 John

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.

Umut Esen

Umut is a certified Microsoft Certified Solutions Developer and has an MSc in Computer Science. He is currently working as a senior software developer for Royal London. He is the primary author and the founder of onthecode.

Leave a Reply

Close Menu

Free Template

Get your Angular Material application template to kick-start your next project.