when substracting two dates in JavaScript it gives me a decimal number, but how is that possible?

Question

I'm watching a video where the diff between two dates returns 10 but when I try it gives me a decimal number but why is that? I could wrap it in Math.floor() but I'd appreciate if anyone explain me. Here is the code

const calcDaysPassed = (date1, date2) =>
  Math.abs(date2 - date1) / (1000 * 60 * 60 * 24);

const days1 = calcDaysPassed(
  new Date(2037, 3, 4),
  new Date(2037, 3, 14)
);
console.log(days1);

jabaa · Answer 1 · 2022-03-27T01:29:00.823

0

"Date objects contain a Number that represents milliseconds since 1 January 1970 UTC." MDN

date2 - date1 returns the difference in milliseconds. The conversion is described in MDN:

The [@@toPrimitive]() method of the Date object returns a primitive value, that is either of type number or of type string.

If hint is string or default, [@@toPrimitive]() tries to call the toString method. If the toString property does not exist, it tries to call the valueOf method and if the valueOf does not exist either, [@@toPrimitive]() throws a TypeError.

If hint is number, [@@toPrimitive]() first tries to call valueOf, and if that fails, it calls toString.

JavaScript calls the [@@toPrimitive]() method to convert an object to a primitive value. You rarely need to invoke the [@@toPrimitive]() method yourself; JavaScript automatically invokes it when encountering an object where a primitive value is expected.

Math.abs(date2 - date1) / (1000 * 60 * 60 * 24) converts the milliseconds to days.

edited Mar 27 '22 at 01:29

answered Mar 27 '22 at 01:21

jabaa

5,844
3
9
30

I don't think the MDN explanation is helpful. For arithmetic expressions, the algorithm goes via [*ApplyStringOrNumericBinaryOperator*](https://262.ecma-international.org/#sec-applystringornumericbinaryoperator) which, in the case of subtraction, first calls *ToNumeric* on the operands, which in turn calls *ToPrimitive* with hint *number*. That is how `@@toPrimitive` gets to be called with hint *number* rather than defaulting to *default* or *string*. – RobG Mar 27 '22 at 03:11
@RobG To me it was helpful. Mathematical operator call `[Symbol.toPrimitive]` in some way. When I want to create a class that supports mathematical operators, I can implement one of these methods. When I want to know what happens with `Date` objects in operations, this is the explanation. The important information is that `@@toPrimitive` calls `valueOf` and `valueOf` returns the number of milliseconds. – jabaa Mar 27 '22 at 11:34
The issue is that the default for a Date's `@@ toPrimitive` is to return a string, not a number. It is only for expressions involving the subtraction operator that it's called with hint number. The OP won't get that from the MDN description given the original question is why does Date subtraction return a number. – RobG Mar 27 '22 at 23:35
@RobG To me it was important to know that `@@toPrimitive` is called for the subtraction and that `@@toPrimitive` can be called with a hint for string or number. for the subtraction. It's somehow intuitive that it's called with the number hint. I guess, from there interested readers can dig deeper, but for me it was enough to understand that. Also important is, that `valueOf` is called for number hint. – jabaa Mar 27 '22 at 23:37

score 0 · Answer 2 · answered Mar 27 '22 at 01:24

Date objects represent a single instant in time and are just a time value that is an offset from 1 Jan 1970 UTC.

The subtraction operator coerces the Date objects to number as if by date.valueOf() which is equivalent to date.getTime(), so when you subtract one date from another you get the difference in their time values such that:

dateA - dateB === dateA.getTime() - dateB.getTime()

So in your code:

new Date(2037, 3, 4) - new Date(2037, 3, 14);

returns the difference in milliseconds:

-864000000

which is 10 standard days.

Note that the values passed to the Date constructor above are interpreted as local so if there is a daylight saving changeover in the date range the difference might be more or less by the amount of the daylight saving shift (typically 1 hour but in some places 30 minutes).

There are lots of similar questions:

when substracting two dates in JavaScript it gives me a decimal number, but how is that possible?

2 Answers2