Lesson Description

The "Date Objects" Lesson is part of the full, JavaScript: The Hard Parts, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Will demonstrates how the built-in Date function returns a date value, representing milliseconds since January 1, 1970. Although these date objects cannot be directly subtracted or compared, the hidden millisecond values can be accessed indirectly to measure time differences. He also demonstrates that these date objects are regular objects, allowing properties to be added using square bracket notation, which is important for metaprogramming and dynamic property assignment.

Preview

Transcript from the "Date Objects" Lesson

[00:00:00]
>> Will Sentance: Let's then encounter two objects returned, respectively, from our first call to date here and our second call to date here. Date is going to be a built-in function in JavaScript, available to us as soon as we switch on JavaScript's engine. And when we do, and call it with the new keyword, and people forgive me for referencing something here that we don't talk about until tomorrow, but we're just going to get an object out of this right-hand side here that has, we're going to see a hidden property on it called date value.

[00:00:39]
A hidden property called date value that has a number of milliseconds since the day computers were invented, January 1st, 1970 at midnight. Since that day, just to be clear, that's not the day computers were invented, but that's the day that milliseconds start counting from, and then when we run it 3 seconds later, it's going to be that plus 3 seconds, which is 3000 milliseconds. Okay? That value is going to be stored on the hidden date value property of the returned object from calling the date function built in with a new keyword.

[00:01:15]
All I dream about being able to do would be to compare those two objects directly, maybe minus them, you know, run, do a minus between them, and minus the one, well, we'll see, whatever the number is for my timestamp of the first call here, which is going to be January 15th, 2027 at midnight. Why could it be then? And then 3 seconds later, January 15th, 2027, midnight and 3 seconds. I would love to be able to just do my time two minus time one and find out how much time has passed.

[00:01:49]
But of course I can't, they're two objects. It'd be impossible. We know that we can't compare positions in memory. Besides, we said earlier, pointer math, which is not something in JavaScript, where you can actually compare addresses by their position, which is quite cool, right? But that's not in JavaScript. So, I think we're done. No, no, no, we're not done, we're going to have an answer. Firstly though, I want you to start thinking what?

[00:02:19]
Is how many milliseconds have passed at January 15th, 2027, midnight, since January 1st, 1970. I'm so grateful, Michael, that you did that thing where you go, huh, let me think. That was really profound, maybe if you just thought hard enough, that's amazing. So, line one, line one, Joe, if you don't mind. We have in our memory, well, before, sorry, Joe, let me just say, we have in our memory first built in a function by the name of date.

[00:02:55]
This is available to us in JavaScript by default. I'll put it in a little demarcation to show that it's there by default. And what do we do therefore in line one, Joe. Const time one. Yeah, so we're declaring time one equals the returned value from the call of this date. Yeah. Which we supposed was passed. Oh dang, I grabbed December 15th. Oh, you were ready to say, okay. Because we know that this is going to return out an empty object, people.

[00:03:36]
With a hidden property, and people forgive me, we're going to see new in full tomorrow, exactly what it's doing, but for now, actually hold on to this memory, because we're going to use it tomorrow, it's going to ensure that we get an object out of this function, and this object is going to have a hidden property on it, date, value. That is going to have some number of milliseconds that have passed since January 1st, 1970 at midnight.

[00:04:14]
Yay, how many milliseconds have passed? Don't you all show off, you won't, you will search it, hold on. Who knew already, how many of you knew already? Okay, at least. Obviously not. I did choose a total number of milliseconds that was relatively easy to work with. Did anyone see Austin, what did I choose? How many milliseconds have passed at this? I think 1 trillion 798 billion. Oh no, okay, maybe I got it wrong, oh no, I got that for January 15th, 2027, I think I got it right.

[00:04:54]
Oh yeah, yeah, you're right. At midnight, 15th, that's my bad. Okay, my bad, at midnight, I got. How many milliseconds? 1.8 trillion milliseconds. Why are we doing this? 1.8 trillion milliseconds have passed since day one of computers, January 1st, 1970, when the milliseconds was zero. Okay, amazing. Now, so we're going to store that object here. With our hidden date value property, which is the 1.8 trillion, which is 1 plus 80,000, okay, I don't even know how many, but it's a lot.

[00:05:40]
Alright, and then we're going to run, 3 seconds are going to pass, and we're going to run it again. And by the way, 3 seconds passing here, people, because of some other thing happening, and we're going to, but tomorrow we'll see how time passes properly in JavaScript. And we're going to call date again with a new keyword, another empty object, and this one's date value is going to be what, hopefully people can do this one.

[00:06:13]
Who wants to give me, who wants to volunteer? Chris, what's going to be this one after 3 seconds have passed? 1.8 trillion and 3000. Oh, let's give him a hand, yeah, thank you, Chris. Well done. I don't think I knew how many millisecond, I don't know, maybe I did. Okay, and so into time two, we have another object, this one with date, a hidden property, date value. And it's going to be 1.8 trillion plus 3000, i.e.

[00:06:49]
1.8 trillion and 3000, okay, good, yeah, so. These are incredibly useful numbers, because if we could somehow get access to them, and I'm telling you right now, we can't get access to them by time one dot date value. It turns out there are other ways to get access, but I can't get access by time one dot, square brackets, square brackets, state value, square brackets brackets. But if we could get access to them, we could actually assess when our user presses submit, have they pressed submit really recently, within the last, let's say, 3000 milliseconds or 2000 milliseconds, 2 seconds, and prevent our submission happening.

[00:07:34]
And my dream would be that somehow I could literally just, I don't know, minus this from this. Imagine. But I know I can't, because actually, oh no, I didn't do it, did I? Actually, our two objects are stored by reference, right, so maybe we can even draw, we're going to use pink now for our references. Really, actually, what we have stored here is just the references to the position of the two objects in our heap or in our more extendable memory.

[00:08:06]
But these are just regular objects, so we can't access these properties, but they are just regular objects. In fact, let's try adding some properties to time one and two, and again you might go, why are we doing this? I really want us to be confident they are just regular objects, and I also want us to be honest, to be reminded of square bracket access and property setting, because they're actually a bit of a, you know, and we're going to really rely on using square brackets to add a property.

[00:08:46]
That's a very important one for metaprogramming very soon. So let's keep going here. Chris, we're declaring what after our time two declaration, a constant named month, and it's got what value? The string Jan. Jan, exactly, beautiful. So now, let's go ahead and let's be really precise with what we're doing here, and I'll tell you, I, okay. So, can you talk me through, Chris, what we're doing.

[00:09:15]
In that next line, funny sort of thing we're doing, but let's just get it right, so we're, tell me what's happening in that next line. Okay. So first we captured the reference to time one, yeah, which is our object, our empty object with a hidden property. If I looked at time one in console, well, huh, don't answer that. But if I looked at time one, but for now, we know it's an empty object, I know it's an empty object, and we are setting a property name on it, what?

[00:09:53]
A key or a property name of what, right, the key is Jan, correct, our month evaluates to Jan, okay, and in fact, our property, our keys, even if we don't recognize that most of the time they have the string quotes around, they are strings. And we are setting Jan on. True, see, I told you, I always get this wrong, what did I get wrong? We're saying time month is not Jan, sorry, ah, what am I setting as the, there we go.

[00:10:33]
I'm setting the value of the Jan property we're adding to time one to true. Okay, so I end up with what key value pair on time one, Chris? Jan one. Jan and the one, I'm sorry, true, true, do not fear, I literally got it completely wrong. So let's do it again and do time two, and Chris, talk me through here what's happening. This time we get a reference to time two. Yep, we set its, we evaluate the, what is the value of month.

[00:11:12]
Right, that is Jan, Jan. And we set that value to true. And we set, and so that's going to create what on the time two object? A property, a property by what name? Jan. Jan. And we're going to assign what value to it. True, true. Okay, I hope that. I do think the square bracket notation is, can be a trickster, because it's saying go find the time one object, and on it, assign whatever that thing inside the square brackets evaluates to.

[00:11:48]
That is not your property name. This month, it's like saying, hey, hey, month is not your property name, month is not your key. Month is a thing to go and look up. Whatever you find stored in month in memory. Jan, that's your property name, and now it's time one Jan, or time one Jan as the label. And then we assign true to that. We're doing this because I want to A, be sure this is a regular object, it is, we just assign property to it, but also because we may need to use square bracket notation in a little bit where we want to assign a property name that we don't want to have added directly by us.

[00:12:38]
We'll see you in a second. Okay. Here we're referencing month Jan, setting it as a key, regular property names are just strings, so how could we possibly compare our times, time one and time two? Because my dream would be, can I somehow compare this timestamp to this one? Well, we're already in a difficult place because I don't know how I get access to this hidden property. What can we do, because if we could, we can fix our user experience and prevent our user double submitting within quick succession.

[00:00:00]
We can get a timestamp on their submission, and the next time they submit, if it's less than 2000 milliseconds, say, since the previous submit, we can go, ah, don't, you can't resubmit. So let's see how we could do that.

Learn Straight from the Experts Who Shape the Modern Web

  • 250+
    In-depth Courses
  • Industry Leading Experts
  • 24
    Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now