Javascript

How to sort an array by date in Javascript

We’ve all been in a situation in Javascript where we have a set of data, all with different dates, which we want to sort by date quickly. Let’s look at how this works.

How to sort by date in Javascript

The first step to sorting by date is to ensure all your dates are in date format. Suppose we have an object like this:

let articles = [
    { name: "HTML Inputs", date: "03/03/2022" },
    { name: "Python Tips", date: "04/04/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

This won’t really work for sorting dates, since our date property is in text format. Based on your specific situation, you may have to handle this slightly differently. For this one, I’m simply going to split each date by the forward slash, and replace the value with a valid date value.

let articles = [
    { name: "HTML Inputs", date: "12/03/2022" },
    { name: "Python Tips", date: "04/06/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

console.log(articles);
// This will output the object, now with valid dates!

Sometimes, you won’t have to do this. Sometimes, you’ll have valid dates. You can check, because in our above console.log for articles after converting the dates, they are shown formatted as Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Mean Time)}, for example.

Anyway, now that you’ve got your dates in the standard date format, let’s sort them. We’ll use sort to do this:

let articles = [
    { name: "HTML Inputs", date: "03/03/2022" },
    { name: "Python Tips", date: "04/04/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

console.log(articles);
// This will output
VM93:20 (3) [{…}, {…}, {…}]0: {name: 'HTML Inputs', date: Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Mean Time)}1: {name: 'Python Tips', date: Mon Apr 04 2022 00:00:00 GMT+0100 (British Summer Time)}2: {name: 'Javascript Objects', date: Thu May 05 2022 00:00:00 GMT+0100 (British Summer Time)}length: 3[[Prototype]]: Array(0)
undefined
let articles = [
    { name: "HTML Inputs", date: "12/03/2022" },
    { name: "Python Tips", date: "04/06/2022" },
    { name: "Javascript Objects", date: "05/05/2022" }
]

for(let article of articles) {
    // Split the date by the slash, resulting in an array of [ '03', '03', '2022' ], for example
    let dateArr = article.date.split('/');
    // Year, month, and day from the array. We subtract 1 from month, since months start counting from 0 in Javascript dates.
    let year = parseFloat(dateArr[2]);
    let month = parseFloat(dateArr[1]) - 1;
    let day = parseFloat(dateArr[0])
    // Pass in the different components as year, month, day to get the valid date
    let articleDate = new Date(year, month, day);
    // Update the object
    article.date = articleDate;
}   

articles.sort((a, b) => a.date - b.date);
console.log(articles);

Now, an important thing to note here is that sort changes the original array. So we don’t need to create a new variable to store it. As such, articles will become permanently sorted by date, from earliest date, to latest.

If you want to do it the other way around, write articles.sort((a, b) => b.date - a.date).

Why can we sort dates like numbers in Javascript?

It might seem confusing as to why this works. Surely date is a date - so why can we subtract them from each other? Simply put, as I alluded to earlier, Javascript doesn’t have date types - only date-time types.

That means every date is a date plus a time. Javascript represents this under the hood as a unix time stamp, which is a number representing the number of seconds (or milliseconds, in Javascript’s case) ellapsed since January 1st, 1970. As such, we can subtract dates from each other in Javascript snce they are actually represented as numbers.

More Tips and Tricks for Javascript

• Sharing Screens with the New Javascript Screen Capture API
• Web Workers Tutorial: Learn how Javascript Web Workers Work
• Changing HTML Classes and Attributes in Javascript
• Javascript Objects Cheatsheet
• How to Check if Object is Empty in JavaScript
• How does Optional Chaining work in Javascript?
• Using an Array as Function Parameter in JavaScript
• Scheduling and Runnning Recurring Cron Jobs in Node.JS
• Creating 3d Animated Gradient Effects with Javascript and WebGL
• How to do Everything with Javascript Arrays