Refactor userCreator with new Keyword

[00:00:00]
>> Will Sentance: So here we go, we're diving into our global execution context and defining our first function. Who is going to be the lucky person who gets to talk through it? Joe, line one. Joe has been super engaged the whole way through. It was the eye contact that did me. Don't do eye contact, it's the classic. Matt, the lack of eye contact, because Joe is right, why should eye contact, a thing that I value enormously, mean that you're definitely called on?

[00:00:32]
Matt, no eye contact, Matt had his hat pulled down over. Matt, go on, what are we doing in line one here? Alright, we're declaring the function user creator. Uh-huh, we're declaring a function user creator. But Matt, now we know that all functions are both functions and objects, we're declaring a function object user creator. What else does this user creator immediately have stored on it? It has the this keyword.

[00:01:02]
Oh. As soon as we declare our function, people, it's both a function and what, Joe, unlucky you're up again. An object, so we'll see all of this to come, but it's both a function and also an object. In fact, let's make it even bigger, because that object also, Joe, by default has a property on it, which is what? Yes. What is the property on it? A hidden prototype. Here it's the what, Chris? Prototype, exactly.

[00:01:35]
There it is, don't worry people, this is we'll see this the whole way through, prototype, which is a big old empty object. People, this is any function we ever declare in JavaScript. Most of the time we're not that bothered about this bit here, but in this case, we're going to make great use of it. All functions as soon as they're declared, are automatically both functions and both functions and an object.

[00:02:05]
And automatically any function that gets declared, that object automatically has a property on it by the name of what everybody? Prototype. Is that the hidden property prototype? Uh uh uh, we got that from another part of our process, which we will see in a moment. It is instead a big old empty object. So Chris, go ahead. All objects have the hidden prototype property, yeah, yeah, yeah, so actually there would be a hidden proto or prototype property on this object, on this one, on, yeah, protos all the way down, all the way down until we get to the object.prototype's prototype, which is null.

[00:02:47]
Oh, let's give him a hand, well done, Joe. Right, Joe gets too many hands. Alright, and eyes. Yeah, exactly, exactly, alright, so we've declared user creator, it's so much more than we thought it was. Most of the time we don't care, but because we're going to use the new keyword on it, it's going to grab stuff from here, or at least make a reference to it. OK. With that in mind, we jump down to where I have, I don't need to declare userCreator.prototype is an empty object, I'm just showing us here that whereas before we declared function store and said it's an object and put the functions in there, now we don't need to.

[00:03:26]
userCreator.prototype is already a good old object we can use for the functions we want all objects returned out of user creator to have access to, because JavaScript is going to go looking there. So it's already an empty object. What are we going to assign? And Chris, I'm going to turn to you here. We've got 123 steps to go, look up, look it up for me. Next line, we know that we're not doing anything in the line saying usercreator.prototype just to show us that it's an empty object.

[00:03:53]
We hit the next line, what are we doing, Chris? First we look for user creator. Excellent, is it there? Yes it is. And then. Yeah, yeah, yeah, and what bit of it are we accessing here? The prototype property. Let's be precise, are we accessing its function bit or its object bit? Object. Object bit, how do we know? Dot. Dot. Well done. If we put parens on the end of user creator, as we do later on, we run its function bit.

[00:04:17]
But we're hitting its object bit. Let's hope it's got an object, of course it does. And on that, let's hope it's got this prototype property, well we saw it did because we checked earlier and put the little comment saying it's an empty object. We find the prototype property and what is it? What's stored on the prototype property? An empty object, an empty object. And then what do we do here? We look for, first we look for its increment property.

[00:04:47]
I guess it's fair to say we would sort of first look for, but in this case because we're looking for it, it ain't there. JavaScript does what? Creates. Creates, well done. That is an interesting thing, never lose sight of the JavaScript will either look for it if it's there, if it doesn't, it's going to create it. And that's what it's doing, it's creating the label, the key increment. And assigning what to it.

[00:05:12]
A function, a function, which we didn't give a name to here. There it is. We're assigning a function with the code this.score plus plus inside of it. We have ended up, people, with exactly the same situation we had as before, which was we call it user function store, which was an object with increment and login in it. Now, we've replaced that with this object here that is given to us by JavaScript automatically.

[00:05:36]
In fact, we could even honestly do object.create and pass in this bit here anyway. We could have done that. But we have an object here that we can use, so we're going to use it because by the way, JavaScript needs an automatic place, a place it knows that with a new keyword, it's going to go and find the functions we want to have access to. And it's always in the function on which we run with the new keyword, its object version, in its prototype property, which is an object into which we put the functions.

[00:06:08]
Jesus Christ. Alright, good. Amazing. Now we hit our final, well, our key line of code that's going to go and call our user creator, and it's going to automate a ton of work. But left-hand side first, Brady, left-hand side, what are we declaring in the last line of code here? The constant user1. The constant user1. We don't know what to assign to it yet, so we're going to go and call our user creator function.

[00:06:40]
Just a regular function call with paren. There it is, what arguments are we passing, Brady? String Ari and the number 3. Beautiful. It's a function, cool, so we create a brand new everyone together. Execution context, execution context, and it was with a surprising amount of energy for the time of day. I'm very impressed. Into it we go, but people, this time we're calling it with this new keyword in front that is going to do so much stuff inside of this function call automatically for us.

[00:07:27]
But in we go, and the first thing, well, actually, let's start with, as always, the first thing we do inside local memory, our parameter argument setup. So our first parameter we said was what? Brady, I'm sorry, Brady. Brady, what was our first parameter? Name, and we are assigning it what argument value? Ari beautiful. And our second parameter was what? Score. Score, amazing. And we're assigning what value, the number 3.

[00:08:04]
Beautiful. OK, now before we then created our own object that we were going to add those properties to. OK, passing them in is not adding them to an object inside a user creator, uh uh uh. Instead though. But nevertheless though, we are not going to create our object inside manually. I'll cross that line out where we declared an object. Instead, our new keyword is going to automatically in memory create a big old empty object for us.

[00:08:41]
And what label, Chris, is it going to incredibly helpfully give us to refer to that object so we can actually stick our data in it? Prototype or what no, no, no, this, this exactly what I'm Chris. Even the class star, every now and then gets exactly, Chris is right, the keyword, because we saw that earlier this had a completely different meaning. It referred to the object to the left of the dot. So can we really believe it's also, yeah, it does, I'm afraid.

[00:09:11]
Here, it's referring to the auto-created object, so the first thing the new keyword does is set a brand new empty object to the value, to the label of this, the implicit parameter, there it is. What's the next thing that we saw we previously had to do manually? Tenzin, what was the next thing we saw that we previously had to do manually, we wanted that object that was created. If we didn't want to add functions to it ourselves there and then, because we'd have to create new copies of that function every time we create an object and waste space.

[00:09:54]
Instead, we set a link to what before? The function store. Yeah, what in terms of. We are not going to have the chance to do that now because the object was created automatically. Do we panic? No. Where does our hidden reference, maybe we could call it proto reference, get automatically set to Joe. This is a challenging one. Prototype. Yes, but Chris, where is it? Point to it on the board, upper right.

[00:10:41]
Oh, OK, I'll take that. Exactly, it's going to automatically be referencing this object up here. We could even say, the next thing it does is set our hidden prototype link to, oh the name of the function user creator in its object version. Which is this object here, userCreator.prototype, this object here. We've ended up in the same position as before, we have an object with a label we can use, with a hidden link up to, hopefully, the functions we want that object to have access to.

[00:11:13]
And it's automatically everything in blue, I don't get to choose. JavaScript chose it via the new keyword. OK, but now we are actually back to regular JavaScript. I want to stick some stuff on this object, otherwise, you know, it's just generic. So, Tenzin, let me add, this is quite challenging, let me add a property to this object. What label do I now have available to access this object, Tenzin.

[00:11:41]
What label do I have to access this object here? Property. This object here, what's the label for it? This, this, one under 10, Tenzin. So if I want to add a new property to this auto-created object, we used to call it new user, right? So we did newUser.name. Now we're going to do this.what do we, if we want to add a name property, we're going to do this.what? Name. This.name. And assign to it the value of name, which is what here?

[00:12:15]
The string of Ari, so we're going to assign Ari to this which is our auto-created object, we're going to create a name property on it, and assign it Ari and then we're going to do it again. This.score is whatever the value of score that was passed in. We're going to grab the value of score, the argument which is 3, and we're going to set it on this.score, meaning we're going to live create that score property and give it the value of 3.

[00:12:46]
This.name, this object. Create a name property, assign it the value of the name argument, which was Ari. The value name parameter, which was Ari and then the same for score, which was 3. We have our object which is very much the same as we had before. We called it new user before and we manually created it, but now it's automatic, everything in blue done by these three letters. And you can remember that because there's three letters.

[00:13:15]
And the first one creates, no, ah that's going to be a new thing. The first one creates empty object. The next letter. That's not true, people. But the next letter sets its link, its proto reference, its prototype hidden link up to the function that is doing the work's object version that is a very useful empty object into which we now put the method increment that we want to have access to. When that object gets out and stored in user1.

[00:13:51]
But do I see a return statement in my user creator function now? Uh uh, Chris, what do you think is the last thing that the, OK, I've got to stop doing that. What is the last thing that gets automated by the new keyword? The return. The return, exactly. Return out the object. I wish we could just say, you know, return out this essentially, and. That object gets stored where? Chris. User1. User1. I think I'm going to keep the blue reference, you know, telling us this is all stuff done by the new keyword.

[00:14:43]
And we had name of Ari, we had score of 3, and we have our hidden link up to this store of functions under the hidden proto link. So, let's do our lookup. Chris, user1, where is it? It looks in global memory. Can we find it? Yes, we do, excellent. We look on its properties. Is increment on its properties? No, it is not. Do we panic? No. No. Where does JavaScript go and look? Its proto. Yes, its hidden proto reference.

[00:15:17]
Which takes us up to where the user creator in its prototype, yeah, in it, sure, but user creator in its what form? Object form and look on the prototype property, which is an object and we start looking through it, do we find increment? Yes we do. You bet we do, and we create a new execution context to run it. And we know that again, let's not lose sight, that inside of its local memory, the this will be automatically set to whatever is left of the dot, which is user1, so when we hit this.score plus plus.

[00:15:56]
We get user1.score plus plus, because it's this.score plus plus and user1.score plus plus, there it is. And we increment it by 1. Alright people, we have here removed so much of the code we had to write. The new keyword has automated all of it for us. We now actually end up with a rather tight code here, where if you look inside our user creator function, we didn't need to create the object. We did it automatically, and we refer to it as this.

[00:16:32]
This is all exactly the same code, by the way. We didn't need to return out the object. Compare these side by side, we got rid of and just are left with, the only thing we have to manually state is to put the arguments onto the object. We didn't need to create a function store, as we did before, where we put the shared functions. Instead, we could just put them into our suitably available object that JavaScript gave us because it knows we might use this new keyword on the function, and it's there that JavaScript will make the bond for our object automatically.

[00:00:00]
And we did that right here. UserCreator.prototype, set increment as a function there. In this version here we also added login as a function there, and our user1 that came out of running user creator with this wildly powerful new keyword, our user1 had access to both increment and now to login, and we were able to run increment, all automated by the new keyword, but nothing, people, changed under the hood.