How to sort by date in JavaScript? [SOLVED]

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