hasOwnProperty & Object Prototype

[00:00:00]
>> Will Sentance: So what if we wanted to confirm, I'm just creating a hypothetical scenario here, well, not hypothetical, quite useful. What if we want to confirm that our user one has the property score on it. So the only thing I've changed here, people. I know it's got squished here, but the only thing I've changed here is I'm now running user one has owned property, not increment, but has owned property, and then passing in the argument score.

[00:00:26]
So let's do this. User one dot has own property and passing in score. Okay, Chris, help me out with the lookup. User one, where is it? Local, global, global memory, do we have it? Yes. Okay, has owned property. Is it name? No. Is it score? You're being very generous here, by the way, Chris. For the people online, they're just loving the clarity that you're providing. Is it score? No, are we looking for the method has own property, yeah, sorry, we're looking for the method has our own property because that's what we want to use, right?

[00:01:10]
Right. Is it on? Yeah, I see why you hesitated. Does has own property, let's be really clear there, thank you, Chris. We're looking on user one for a property which happens to be a function we can run, hopefully, called has own property. It's not name, is it score? No. So where do we go look? Prototype. Excellent. Is it increment? Is it login? Huh. Okay. Anyone got an idea, yeah, Chris, please. Does object have its own prototype?

[00:01:51]
Oh wow. Do all objects by default potentially, and yes, the answer is in fact in JavaScript, we have a big old object. I'm just going to object.prototype, which is itself a big old object full of useful functions that we would hope that all of our objects have access to. But damn it, I've blocked off any access because there's only one prototype reference on each object, and this one points to user function store.

[00:02:27]
On this object is has own property, and many other useful, built-in functions. What do we think might happen when we don't find has owned property either on user one, or on user function store, what do you think that user function store, as soon as it's defined, might have had set up automatically, Chris? Prototype. A prototype hidden property of its own. A prototype hidden property of its own, pointing off.

[00:03:07]
Beautiful. A prototype hidden property of its own, pointing off to where do you think, Chris? Object.prototype this object. Oh no. Okay, we're just going to do it out here. There it is. And when we don't find has owned property on user function store, JavaScript goes to look on its link off to object.prototype itself an object. Now, technically, object is an object, which has a property on it prototype, which is this object that we're looking at here.

[00:03:49]
And there, what, Chris, do we find? Has own property, and we get to run its code and passing score. What is its prototype? What is its hidden reference off? What if we don't find it on object.prototype object? Don't panic. This one points to null, it's the end of the chain. Okay, people, this is the chain that we can then intercede. In fact, user one, if we hadn't used Object.create and just declared a regular object, and user two, respectively, out of running new user, would have had their prototype point to this object.prototype, so that it has access to all the useful functions.

[00:04:36]
Well, we don't want to lose access to those, don't panic, the object that we gave it access to, user function store itself. Has access off to this object.prototype, and JavaScript goes up the chain, user one.increment, doesn't find it on user one, no panic, go up the prototype chain to user function store, increment, great. User one has own property, it's not on user one, I didn't add it. It's an empty object.

[00:05:05]
Well, no, it's got two properties, name and score, but it's a regular object. It ain't on user function store because I know what I put on user function store, increment and login. And it didn't suddenly magically have, like, has own property on it. Don't panic, it by default, all objects, as soon as they're created by default, have a hidden reference link in the hidden prototype, square bracket, square bracket, prototype, square bracket square bracket, property off to a, let me actually make sure this is, I don't like calling something like that, let's make it really clear what it is.

[00:05:41]
This is an object, sorry, this is a built-in thing stored in memory, let's make sure it's clear, it's built in, that's why I put the dots around it, called object, which is itself a big old object. Which has a property on it, Chris, called what? Has her own property. Ah, that's on the prototype has on it a property called prototype, which is an object. This here is not our hidden prototype property.

[00:06:17]
This is where I find JavaScript's naming conventions a bit rough. Like object.prototype is accessed by all objects. Hidden prototype reference to that object, object.prototype, and you can see how the, so I used to like to call this hidden property, because in the end it's hidden. I used to like call it square bracket, square bracket proto, square bracket, square bracket. In fact, you can still access it directly on an object via __proto__, and you can actually see exactly what is referenced there.

[00:06:44]
That's a sort of legacy, almost deprecated, it still works, but legacy way of seeing the prototype. The spec defines it as square bracket square bracket, prototype, square bracket, square bracket. And all objects by default have access to an object that is on a built-in object called object that has on it a property called prototype, which is a big old object, that's the object where our has owned property is.

[00:07:15]
So when we go user one.has own property, we go to user one. There ain't any has owned property here. Do we panic? No, we go up to user function store. Has owned property, ah, it ain't there either. Do we panic? We go up to object or proto, this object here, technically on object, if you were to console log object, well, you'll see something else as well, but you console log object, it is this object with a property prototype, just a regular string prototype, and on that is the object in which we have all of our functions that we want all objects to have access to after the dot automatically.

[00:07:57]
This may give you a hint, and we're not going to go further into it, go watch OOP Hard Parts, as to why arrays, also after the dot, have a bunch of built-in things available to them. Maybe arrays are also running up a prototype chain to get access to a bunch of built-in functions. Okay, I want to do one more piece to this, because before we then find our cleanup of all of this, because we're going to discover a keyword with three letters in it that's going to automate most of the work we did here, thank goodness, but now we'll be able to answer every interviewer's favorite question, which is what is the, I still remember being interviewed on that.

[00:08:33]
What is the new keyword really doing? It is every interviewer's favorite question. We wouldn't, well, we don't know what the keyword is we're going to use yet, but let's imagine, let's imagine I didn't say that. Alright, so let's just get rid of this little bonus bit here. There's one other piece I do want to add, which is to do with arrow functions and their rather interesting rules about what data they have access to when they are invoked when they are run.

[00:09:09]
Whew, so let's just get rid of all of these pieces here, just for now, so that we're not overcrowded on here. We don't, we know this is here. We know that all objects have that. Let's get rid of it. This and also our call to increment, have a look on that blackboard there people, and we should be able to see not blackboard, sorry, on the screen here, we should be able to see what did I do here. I moved, I got rid of my login function in user function store and just left the increment function.

[00:09:37]
That's just for readability on the screen, but let's make sure we're consistent. So we got rid of our login function here. But I put my increment function on three lines, that's all I've changed here, just to be clear. I've put increment is a function with this plus this.score plus plus. I did that because I want to do something else. Rather than do my this.score plus plus from calling increment directly inside of increment, I'm actually going to define a new function in there called add one that does the this.score plus plus.

[00:10:08]
I just run it right there. That makes sense because often I might want to do a bunch of work in my, let's say, increment function that I call on user one or user two. I might want to, I don't know, do a bunch of kind of work, so I want to break it up into separate functions. I'm just doing that here because we're going to see something happen.