Sort an Array of Objects by Date property in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 6, 2024
5 min

banner

# Sort an Array of Objects by Date property in JavaScript

To sort an array of objects by date property:

  1. Call the sort() method on the array.
  2. Subtract the date in the second object from the date in the first.
  3. Return the result.
index.js
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // โœ… Sort in Ascending order (low to high) const sortedAsc = arr1.sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // ๐Ÿ‘‡๏ธ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc);

sort array of objects by date property

The code for this article is available on GitHub

If you need to sort the array of objects by a date property in descending order, use the following code sample instead.

index.js
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // โœ… Sort in Descending order (high to low) const sortedDesc = arr1.sort( (objA, objB) => Number(objB.date) - Number(objA.date), ); // ๐Ÿ‘‡๏ธ {id: 5, date: Wed Feb 24 2027, // id: 2, date: Fri Feb 24 2023, // ๏ธ id: 3, date: Thu Feb 24 2022} console.log(sortedDesc);

The code snippet assumes that your array of objects contains Date objects.

# Sort an Array of Objects by Date property with string values

If it contains Date strings, use the Array.map() method to convert the strings to Date objects before calling Array.sort().

index.js
const arr1 = [ {id: 3, date: '2022-02-24'}, {id: 5, date: '2027-02-24'}, {id: 2, date: '2023-02-24'}, ].map(obj => { return {...obj, date: new Date(obj.date)}; }); console.log(arr1); // โœ… Sort in Ascending order (low to high) const sortedAsc = arr1.sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // ๐Ÿ‘‡๏ธ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc);

sort array of objects by date property with string values

The code for this article is available on GitHub

If you need to sort the array in descending order, subtract the first argument from the second in the call to sort().

index.js
const arr1 = [ {id: 3, date: '2022-02-24'}, {id: 5, date: '2027-02-24'}, {id: 2, date: '2023-02-24'}, ].map(obj => { return {...obj, date: new Date(obj.date)}; }); console.log(arr1); // โœ… Sort in Descending order (high to low) const sortedDesc = arr1.sort( (objA, objB) => Number(objB.date) - Number(objA.date), ); // ๐Ÿ‘‡๏ธ {id: 5, date: Wed Feb 24 2027, // id: 2, date: Fri Feb 24 2023, // ๏ธ id: 3, date: Thu Feb 24 2022} console.log(sortedDesc);
The code snippet shows how to sort an array of objects by a date property if your starting point is an array containing objects with date strings.

We used the Array.sort() method to sort an array of objects by a date property.

The sort() method sorts the elements of the array in place and returns the sorted array. In other words, it mutates the original array.

# Sort an Array of Objects by Date property without mutation

If you need to sort the array without mutating it, use the spread syntax (...) to create a shallow copy before calling the sort() method.

index.js
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // โœ… Sort in Ascending order (low to high) const sortedAsc = [...arr1].sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // ๐Ÿ‘‡๏ธ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc);

sort array of objects by date property without mutation

The code for this article is available on GitHub

We used the spread syntax (...) to unpack the values of the array into a new array before calling the sort method.

We passed the Date objects to the Number function to get the timestamp of each date.

Under the hood, each Date object in JavaScript stores the number of milliseconds elapsed between the 1st of January 1970 00:00:00 and the given date.

index.js
// ๐Ÿ‘‡๏ธ 1645454934750 console.log(Number(new Date()));

You can explicitly call the getTime method to get the timestamp.

index.js
// ๐Ÿ‘‡๏ธ 1645454934750 console.log(new Date().getTime());

The parameter we passed to the sort() method is a function that defines the sort order.

index.js
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // โœ… Sort in Ascending order (low to high) const sortedAsc = arr1.sort( (objA, objB) => Number(objA.date) - Number(objB.date), ); // ๐Ÿ‘‡๏ธ {id: 3, date: Thu Feb 24 2022, // id: 2, date: Fri Feb 24 2023 // id: 5, date: Wed Feb 24 2027} console.log(sortedAsc);
The code for this article is available on GitHub

The function gets called with 2 of the elements (objects) in the array on each iteration.

The sort() method uses the following logic to sort the elements in the array:

  • If the return value of the compare function is greater than 0, then sort b before a.

  • If the return value of the compare function is less than 0, then sort a before b.

  • If the return value of the compare function is equal to 0, keep the original order of a and b.

# Sort an Array of Objects by Date property in descending order

To sort the array of objects by date property in descending order, you just have to subtract the timestamp of the first date from the timestamp of the second.

index.js
const arr1 = [ {id: 3, date: new Date(2022, 1, 24)}, {id: 5, date: new Date(2027, 1, 24)}, {id: 2, date: new Date(2023, 1, 24)}, ]; // โœ… Sort in Descending order (high to low) const sortedDesc = arr1.sort( (objA, objB) => Number(objB.date) - Number(objA.date), ); // ๐Ÿ‘‡๏ธ {id: 5, date: Wed Feb 24 2027, // id: 2, date: Fri Feb 24 2023, // ๏ธ id: 3, date: Thu Feb 24 2022} console.log(sortedDesc); // ๐Ÿ‘‡๏ธ 1645454934750 console.log(new Date().getTime());
The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev