How to sort an array by date in Javascript
📣 Sponsor
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.
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.
More Tips and Tricks for Javascript
- Javascript Map, and How it is Different from forEach
- Sharing Screens with the New Javascript Screen Capture API
- Converting Binary to Decimal
- Javascript Reserved Keywords
- Javascript Array Every Method
- How Generator Functions work in Javascript
- Javascript toLowerCase() - Convert Strings to Lowercase
- How to Create the iPhone Interface with Long Press in Javascript
- What are the three dots (...) or spread operator in Javascript?
- Javascript Logical Statements and Loops