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. : It should be noted that there is no such thing as a in Javascript. Instead, Javascript, natively, only has . That means every date comes with an associated time. Note on Javascript Dates date date-time How to sort by date in Javascript The first step to sorting by date is to ensure all your dates are in format. Suppose we have an object like this: date 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 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. date 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! , you won't have to do this. Sometimes, you'll have valid dates. You can check, because in our above for after converting the dates, they are shown formatted as , for example. Sometimes console.log articles Thu Mar 03 2022 00:00:00 GMT+0000 (Greenwich Mean Time)} Anyway, now that you've got your dates in the standard date format, let's sort them. We'll use to do this: sort 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 changes the original array. So we don't need to create a new variable to store it. As such, will become permanently sorted by date, from the earliest date to the latest. sort articles 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 is a - so why can we subtract them from each other? Simply put, as I alluded to earlier, Javascript doesn't have types - only types. date date date date-time That means every date is a plus a . 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) elapsed since . As such, we can subtract dates from each other in Javascript since they are actually represented as numbers. date time January 1st, 1970 Also published . here

How to Sort an Array by Date in Javascript

Too Long; Didn't Read

Coin Mentioned

@smpnjn

RELATED STORIES