Introduction
Javascript provides a few ways to sort arrays or lists of data. One of the most common ways is to use the sort
function. This function takes an array of data and a sorting function as input. The sorting function can be anything you want, but the most common is to use the compare
function.
In this article, we discuss how to sort by date in JavaScript using the sort
function
Use sort
function to sort by date
The sort
function helps sort array elements and returns a sorted array referenced to the passed array binding. In addition, the sort
function sorts the array elements in ascending order. However, can we sort date elements? Yes, and the sort
element does it quite natively. The Date()
object defines the timestamp as the number of milliseconds that have passed since January 1st, 1970, and the sort
function can use this timestamp value to compare each date value.
Therefore, if we have the date values stored within an array object, we can simply use the sort
function in combination with a compare callback function. Let’s illustrate.
const dates = [
new Date("February 28, 2022 10:20:40"),
new Date("August 30, 2021 03:15:30"),
new Date("January 19, 2021 04:20"),
new Date("December 1, 2022 13:05"),
];
dates.sort((date1, date2) => date1 - date2);
console.log(dates);
Output
[
2021-01-19T03:20:00.000Z,
2021-08-30T02:15:30.000Z,
2022-02-28T09:20:40.000Z,
2022-12-01T12:05:00.000Z
]
All dates are arranged in ascending order. To achieve this, we have passed an anonymous function that compares each date by subtracting both dates (the previous value from the current value) from each other to see which values will be higher or lower.
If we want to sort the date in descending order, we can change the order of the subtraction within the callback function
dates.sort((date1, date2) => date2 - date1);
Output
[
2022-12-01T12:05:00.000Z,
2022-02-28T09:20:40.000Z,
2021-08-30T02:15:30.000Z,
2021-01-19T03:20:00.000Z
]
Even if the date value is within an object, we can achieve the same thing using the sort
function where we access the date
value and perform the same comparison (using subtraction)
const users = [
{
createdAt: new Date("February 28, 2022 10:20:40"),
firstName: "Olorunfemi",
lastName: "Akinlua",
status: true,
isActive: false,
},
{
createdAt: new Date("August 30, 2021 03:15:30"),
firstName: "Deepak",
lastName: "Rashneh",
status: true,
isActive: false,
},
{
createdAt: new Date("January 19, 2021 04:20"),
firstName: "David",
lastName: "Moyes",
status: false,
isActive: false,
},
];
users.sort((first, second) => first.createdAt - second.createdAt);
console.log(users);
Output
[
{
createdAt: 2021-01-19T03:20:00.000Z,
firstName: 'David',
lastName: 'Moyes',
status: false,
isActive: false
},
{
createdAt: 2021-08-30T02:15:30.000Z,
firstName: 'Deepak',
lastName: 'Rashneh',
status: true,
isActive: false
},
{
createdAt: 2022-02-28T09:20:40.000Z,
firstName: 'Olorunfemi',
lastName: 'Akinlua',
status: true,
isActive: false
}
]
Summary
Using the underlying timestamp value of date values, we can easily sort them using the provided sort
function using subtraction within the callback function. We can introduce more complexity to how we compare by studying how to make use of the sort
function (the references is useful).
References
Array.prototype.sort() - JavaScript | MDN (mozilla.org)
date/time field value out of range JavaScript [Solved] | GoLinuxCloud
How to sort an object array by date property? - Stack Overflow