3 Neat Features of JavaScript's Much-Maligned Date Class
Tags: javascript, codenewbie
Published: 2021-09-21 22:23:37

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ez74ymy9twxwwt134p6n.jpeg)

JavaScript's `Date` class is a common source of frustration, and there's countless blog posts on the internet describing precisely why `Date` is so hard to work with:

1) Formatting is limited and hard to work with, and doesn't have great browser support
2) The string formats that the `Date()` constructor accepts are quirky and hard to grasp
3) Limited timezone support
4) And many more

The limitations of `Date` are a big reason why developers are so excited about the new [Temporal API](https://tc39.es/proposal-temporal/docs/). But don't write off the `Date` class completely. Believe it or not, the `Date` class has a few delightful features that we love.

### 1) You can [compare dates](https://masteringjs.io/tutorials/fundamentals/compare-dates) using `<` and `>`

One tragic limitation of the `Date()` class is that neither `===` nor `==` can determine whether two dates are equal.

```javascript
const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 === d3; // false
d1 == d3; // false
```

But, oddly enough, `<` and `>` work for determining whether one date is before or after another. You don't need Moment's or date-fns' `isAfter()` function. 

```javascript
d1 < d2; // false
d1 < d3; // false

d2 < d1; // true
```

### 2) Subtracting two dates returns the difference between the dates in milliseconds

The addition operator `+` notoriously doesn't work well with JavaScript dates. Adding `1000` to a date just returns a string with `1000` concatenated to the end of the date as a string.

```javascript
const d = new Date();

d + 1000; // 'Tue Sep 21 2021 18:06:39 GMT-0400 (Eastern Daylight Time)1000'
```

However, if you subtract two `Date` instances, you get back the difference in milliseconds.

```javascript
const d1 = new Date('2019-06-01');
const d2 = new Date('2018-06-01');
const d3 = new Date('2019-06-01');

d1 - d3; // 0
d1 - d2; // 1 year in milliseconds, 1000 * 60 * 60 * 24 * 365
```

Even better, if subtract a number from a date, JavaScript converts the date to the [unix timestamp](https://masteringjs.io/tutorials/fundamentals/timestamps) and subtracts the number from that. So, while you can't easily add to a date, you can subtract from a date.

```javascript
const d1 = new Date('2019-06-01');

d1; // 2019-06-01T00:00:00.000Z

new Date(d1 - 1000 * 60 * 60 * 24 * 365); // 2018-06-01T00:00:00.000Z
```

For example, to add 1 year to a date (modulo leap years, leap seconds, etc.) you can subtract a negative number from the date as shown below.

```javascript
const d2 = new Date('2018-06-01');

new Date(d2 - -1 * 1000 * 60 * 60 * 24 * 365); // 2019-06-01T00:00:00.000Z
```

### 3) Basic Timezone Formatting

Most developers don't know that you can format dates in arbitrary timezones using the [`toLocaleString()` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString). The tradeoff is that some older browsers, like IE, don't support IANA timezone names. Here's an example of basic [date formatting in JavaScript](https://masteringjs.io/tutorials/fundamentals/date_format) with timezones.

```javascript
const date = new Date('2019-06-01T08:00:00.000Z');
// "June 01, 2019, 2 AM"
date.toLocaleString('en-US', {
  month: 'long',
  day: '2-digit',
  year: 'numeric',
  hour: '2-digit',
  timeZone: 'America/Denver' // 6 hours behind UTC
});
```

While `toLocaleString()` isn't perfect, it does provide some rudimentary formatting, including timezone support. We still recommend using [Moment](https://thecodebarbarian.com/formatting-javascript-dates-with-moment-js.html) or [date-fns](https://date-fns.org/) for most apps, but you can get away with `toLocaleString()` for some basic formatting.