Sorting an array by date in JavaScript

Sorting an array by date in JavaScript is a common task when working with arrays of objects containing date information. This article shows how to sort objects by their date properties using JavaScript's built-in sorting methods.

The Problem

Suppose we have an array of objects like this:

const arr = [
    {id: 1, date: 'Mar 12 2012 10:00:00 AM'}, 
    {id: 2, date: 'Mar 8 2012 08:00:00 AM'}
];

We need to sort this array according to the date property of each object, either newest first or oldest first. The approach is to convert date strings into JavaScript Date objects and compare their timestamps.

Sorting Oldest to Newest

To sort dates in ascending order (oldest first), we subtract the first date from the second:

const arr = [
    {id: 1, date: 'Mar 12 2012 10:00:00 AM'}, 
    {id: 2, date: 'Mar 8 2012 08:00:00 AM'}
];

const sortByDateAsc = arr => {
    const sorter = (a, b) => {
        return new Date(a.date).getTime() - new Date(b.date).getTime();
    }
    arr.sort(sorter);
};

sortByDateAsc(arr);
console.log(arr);

[
    { id: 2, date: 'Mar 8 2012 08:00:00 AM' },
    { id: 1, date: 'Mar 12 2012 10:00:00 AM' }
]

Sorting Newest to Oldest

To sort in descending order (newest first), we reverse the subtraction:

const arr2 = [
    {id: 1, date: 'Mar 12 2012 10:00:00 AM'}, 
    {id: 2, date: 'Mar 8 2012 08:00:00 AM'},
    {id: 3, date: 'Mar 15 2012 02:00:00 PM'}
];

const sortByDateDesc = arr => {
    const sorter = (a, b) => {
        return new Date(b.date).getTime() - new Date(a.date).getTime();
    }
    arr.sort(sorter);
};

sortByDateDesc(arr2);
console.log(arr2);

[
    { id: 3, date: 'Mar 15 2012 02:00:00 PM' },
    { id: 1, date: 'Mar 12 2012 10:00:00 AM' },
    { id: 2, date: 'Mar 8 2012 08:00:00 AM' }
]

Simplified Version

You can make the code more concise by using arrow functions directly:

const data = [
    {name: 'Event A', date: '2023-01-15'},
    {name: 'Event B', date: '2023-01-10'},
    {name: 'Event C', date: '2023-01-20'}
];

// Sort oldest to newest
const ascending = [...data].sort((a, b) => new Date(a.date) - new Date(b.date));
console.log('Oldest first:', ascending);

// Sort newest to oldest  
const descending = [...data].sort((a, b) => new Date(b.date) - new Date(a.date));
console.log('Newest first:', descending);

Oldest first: [
    { name: 'Event B', date: '2023-01-10' },
    { name: 'Event A', date: '2023-01-15' },
    { name: 'Event C', date: '2023-01-20' }
]
Newest first: [
    { name: 'Event C', date: '2023-01-20' },
    { name: 'Event A', date: '2023-01-15' },
    { name: 'Event B', date: '2023-01-10' }
]

How It Works

The sort() method uses a comparison function that:

• Returns a negative value if the first element should come before the second
• Returns a positive value if the first element should come after the second
• Returns 0 if they are equal

Converting date strings to Date objects and subtracting them gives us the numeric difference needed for proper sorting.

Conclusion

Use new Date() constructor with getTime() or direct subtraction to sort arrays by date properties. Remember that ascending order subtracts a - b, while descending order subtracts b - a.