JavaScript Date Constructor Behind the Scene.
JavaScript Programmers use Moment.js even they don’t really need it. The reason for this I think is that the Date constructor can be confusing if you don’t understand how it works.
In the last few months, I have been working on a huge project that a lot of it uses dates and times. I had to do a lot of calculations of difference between minutes and hours and I started to get dipper to the Date constructor in JavaScript and to the system time in general. As long as I got dipper, I realize how it is so simple, and yet, programmers get lost even in small tasks.
Two things made me want to write this article. The first thing is, that a friend of mine that works as a Front-End Developer has been told by his Back-End coworker to use Moment.js. My friend was OK with the Native API but because the Back-End developer uses Moment on the server, he preferred that my friend will use it on the client-side too.
The second thing is a post that was published on the JavaScript Israel community Group on Facebook.
Why it’s can be so confusing?
One of the things that get programmers confused it’s the Time Zone. Yeah, we all know the Time Zone but we don’t really understand how it works on computers, and when we don’t understand that, we can easily get lost when we have to manipulate dates and times.
So here I’m, trying to make things a little bit clearer.
The System Time.
In most of the computers over the world, there is a system clock that counts the number of milliseconds that pass since 1/1/1970 00:00:00 in UTC. When the computer knows the time that passes since this date, he can calculate this number and extract our time in an understandable format.
The computer knows and counts the time only in UTC.
To show us the time in our correct time zone, the computer just adds hours by our time zone to the system clock. For example, if we are in Israel and the time zone is UTC+2 (or UTC+3 in the summer), so the computer just add 7200000 (1000ms*60s*60m*2h) to the system clock and shows us the time by our time zone.
Before we finally jump to the Date constructor the last thing I wanna talk about is - ISO 8601 date and time format.
ISO 8601 Format.
The ISO format is an international standard to represent date and time. The date and time expressed like “YYYY-MM-DDTHH:MM: SSZ” when the T letter separates the date and the time, and the Z means UTC. by default, this format gives us the UTC as long as we don’t use +UTC (Like +2 for example) number instead of the Z.
Now when we understand this we can understand JavaScript Date constructor slightly better.
The Date Constructor
The Date constructor supports only the user’s local time and UTC.
The Date constructor uses the system time in our machine to show/manipulate us the time.
When we write Date().getTime() we actually get the UNIX time in our system. The time that the computer uses to calculates all the dates. This is the number that the computer uses for comparison between dates, etc… and as you remember, the system time is always in UTC format — so we get the number of milliseconds in UTC.
When we write Date().toISOString() we get the time in ISO format of course BUT because by default ISO format is in UTC — we get the time in UTC.
In all other functions (except the UTC functions obviously), the JavaScript engine returns us the date and time by our time zone. The JS engine takes the UNIX time, adds to it our time zone, and the result turns to something that we can clearly understand.
When we pass a number or a string to the Date constructor we defined the time that we want.
If we pass a number — we define the “system” number in UNIX and it’s always in UTC. Then when we want to getHours() for example, again, the engine takes the number that we passed to him, adds our computer time zone, and then will return us the hours.
If we pass a string — the JavaScript engine takes this string, split it, and starts to calculate the system time according to this string. One of the steps that the engine takes is to remove our time zone and convert it to UTC. Remember? the system time is always in UTC. the computer knows only UNIX time, and he needs to convert this string to UNIX number.
If we pass a string in ISO format like “2020–10–09” because ISO format is by default in UTC, the whole string that the engine looks on it is:
“2020–10–09T00:00:00.0Z”
If we will use this string and call getHours() in our date object, because that the time zone defined as UTC+2 in our computer — we will get 2. Now when you know how things going, it is no longer confusing!
When you understand this, all the manipulation that you want to do on dates and times in your projects, you can do it on your own with simple math. You don’t need to install external packages like Moment.js.
Example:
We want to calculate how many days have between two dates:
Because of the UNIX time, we need to do our calculations in milliseconds. I need to know how many milliseconds there is in one day. It’s ms*m*h*day. Now when we have this number we can subtract the two dates and we will get the difference between the two in milliseconds. now what we have to do is to divide the result by the number of milliseconds of one day that we calculated ahead.
Conclusions
The Date constructor uses the system time (UNIX) to calculate the date. For almost every value that we send to it, the constructor will parse those values to UTC (in UNIX time) except ISO format and UNIX that they’re obviously in UTC.
If we will output the time that the constructor created, it will add our local time zone to the output, except if we ask the ISO format or UNIX time.
This is the basis for understanding how the system time and JS Date constructor work. If you understand this, you don’t need Moment.js at all because you know what you’re doing. No more surprises when working with dates and times.
Of course, sometimes installing an existing package can be a little bit faster than write a few functions on your own, But I really don’t think that all the functions that you will not use, that comes with existing packages worth it.
Good luck!
I hope I did well to explain this subject. If you have a question or maybe you think I had wrong, contact me 😊
