Johnny SimpsonWe'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.
Note on Javascript Dates: It should be noted that there is no such thing as a date in Javascript. Instead, Javascript, natively, only has date-time. That means every date comes with an associated time. You can read more about Javascript Dates here.
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.
