How to sort an array by date in Javascript
Tags: javascript, tutorial, webdev
Published: 2022-08-13 14:49:00

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](https://fjolt.com/article/javascript-date-is-weird).

## 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:
```javascript
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.

```javascript
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:

```javascript
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.