new Keyword

[00:00:00]
>> Will Sentance: That was our amazing prototypal nature of jobs are those purple lines, the prototypal nature of JavaScript. That's a very beautiful way of ensuring that we don't have to have increment directly on user 1 and user 2 and user 500. But we have access to it because when we don't find increment on the mat on the object itself JavaScript doesn't panic.

[00:00:20]
It looks it is proto property in 1, heads up to where it links to user function store and finds a single saved version of that function, grabs it, and uses it. We love it. But as I say, it does involve quite a little bit of writing of code.

[00:00:38]
So if we look back, we had creating the object manually using object.create, storing in a new user. By the way, just a temporary name for it,they never get stuck with that name. Returning out that object manually, we wrote the code for that as well. Creating a bond to use a function store.

[00:00:56]
Wouldn't it be nice if we could automate that stuff? And you know what? There's gonna be a key word, I'm gonna use blue for it, but I'm gonna insert in front of running my function, what is that keyword everybody? Cuz I've written up already I shouldn't have, what is it?

[00:01:12]
>> Braden: New.
>> Will Sentance: New, well done everybody. Sorry, new [SOUND], and why if we say it's a new, interesting, I'm going to say that word and people it's going to automate so much stuff for us. It's going to create automatically inside of here an object. So everything in blue is going to be the stuff that's going to be done for us by the new keyword.

[00:01:38]
So we don't have to do it, we don't have to write that code anymore. It's gonna create a new object for us automatically. It's gonna return that object out for us automatically. Yeah,
>> Will Sentance: It's also, believe it or not, it's gonna make the link to some object full of functions out here, automatically for us, as well.

[00:02:09]
Gonna set the proto property automatically for us as well. I will say this, to where we might think? Because, hold on, before we manually set that object that we sought a new user to have it hidden proto property linked to use a function store was already there. But now I thought would be the case.

[00:02:30]
So I don't know where we're going to put our shared store functions if not in user function store, we're not going to control any more ourselves. Another thing by the way is, how did I get to put properties on this object? What label did I have mapped in order to be able to access this object and stick properties on it.

[00:02:50]
What label did I give it?
>> Braden: New user.
>> Will Sentance: If that object is being automatically created for us, do I get to assign it a label? No. So we got a couple of questions, where we gonna link off to? And what's this object gonna automatically given as a label?

[00:03:07]
I hope it's not the same label as we have for something else in other function calls, that'd be a bit silly, wouldn't it? Yeah, we wouldn't wanna, we wouldn't want to have it be say for example, this that in another place refers to something totally different. That would be very crazy.

[00:03:23]
All right, okay, people, so new keyword automates the hard work. When we call the function that returns an object, with the new keyword in front we automate 2 things. Well, firstly, we create the object automatically. Then, so we see I've put the new in front of it now.

[00:03:44]
Then we return the object automatically. In the meantime, we make sure we stick stuff in it. But we now need to adjust how we write the body of this function, userCreator, the code of it. How can we refer to this auto-created object and know where to put our single versions, one of versions of the shared functions?

[00:04:02]
Because I didn't get to choose to put it in something called user function store anymore. The first bit we can answer right now, have a guess. What do you think they call this object that automatically created anyone take a guess, Peter?
>> Braden: Yes
>> Will Sentance: Yes, this exactly is going to be called this.

[00:04:21]
Given that this refers to its only given object or a different stage of that object. Then when we later on run increment on the object and in its execution corner, is that this refers to whatever the object is to the left of the dot, they're totally separate. That's a little bit confusing when we read our code, well, not just a little bit, it's profoundly confusing.

[00:04:41]
This is the other key rule of how this works. It's always whatever the object is to the left of the dot when we run a method, that this is implicitly assigned to the user 1. It has one other role, if we use a new keyword, the automatically created object inside of that execution context is gonna label this, but they're totally separate.

[00:05:02]
Okay, where are we gonna put out single saved version of the function we want, all objects that come from executing? These are totally different executions of user creator, where do we want all those shared functions that these objects have a link to to be stored? To understand that, we need to add one more preeminent interlude, let's have a look.

[00:05:23]
Preeminent interlude, before we do that, the new keyword automates a lot of our manual work. You see we get rid of the creation of the object is going to be done for us with the new key. When we run user created new is gonna insert and it's going to automatically stick that line up there, creating a new object is going to try to do this not to new user.

[00:05:42]
We're then gonna have access to that object using this. We're not gonna do newUser.name anymore. We're gonna do this name to fix stuff in it. And it's gonna automatically return that this object out into user 1. But our function store, our connection to function store that's done and gone now.

[00:06:03]
So where are we going to? We need a big old object that we can be sure that with their help, with a new keyword, the object that gets automatically created, its proto property will link off to some object. I need to know where that's gonna be. To find out where it's gonna be, let's take a look at this little interlude.

[00:06:30]
Functions are both objects and functions in JavaScript. We need it over here, people. A little bit of a bonus interlude here, really important for us to understand. So we have, memory, you know it's just a, let's do a,
>> Will Sentance: Bit of work. Yeah, look at that was based on advice from one of our audience.

[00:07:01]
So line 1 here, Dan, what are we doing in memory?
>> Dan: We are storing the function multiplyBy2.
>> Will Sentance: Yeah, store the function multiplyBy2, there it is. Okay, line 2 Jeff, what are we doing in that line?
>> Jeff: We are creating a property store on multiplyBy2,
>> Will Sentance: But it's a function, unless Jeff?

[00:07:27]
>> Jeff: It's an object.
>> Will Sentance: A function plus an object. It turns out as soon as that JavaScript sees that keyword function, knows a function is coming, we get a function plus,
>> Will Sentance: A big old object attached. If we use parens on the end of the function, well, we’ll see in a second.

[00:07:50]
If we use dot on the end of the function label, the label for the function, which bit do we get access to Jeff?
>> Jeff: What’s that?
>> Will Sentance: If we use dot on the end of the multiplyBy2 label, which bit of the function object combo. I call them, which bit do we have?

[00:08:03]
We get access to the object bit, exactly right through the dot, into it we go. And what are we gonna store in it, Braden?
>> Braden: 5.
>> Will Sentance: Yeah, on what property name?
>> Braden: Stored.
>> Will Sentance: Stored, look at that, fantastic. But maybe, look at that next line, maybe when we then run multiplyBy2 with the input of 3.

[00:08:25]
Maybe that doesn't work anymore because maybe doing this overwrote the function code, did it Braden? No, what allows us now to still use the function bit, what symbols we're using here?
>> Braden: The parens.
>> Will Sentance: Parens, and that means go use the function bit, it's gonna return out 6.

[00:08:42]
But maybe that using the function is overwritten the object, maybe. Braden do we still get access to our object if we use a dot notation?
>> Braden: Yes.
>> Will Sentance: Yeah, we do. Function object and we're talking about an object as much, but it is in every function is there.

[00:08:58]
But it's gonna turn out here to be super, super, super useful. But if you want to believe will all functions also have, very nice spot what all functions also have by default.
>> Braden: Prototype?
>> Will Sentance: A, I don't wanna say that. A property, no well, yeah, that's what, but a, no, well, yes they do, gosh, yeah.

[00:09:16]
We're gonna see that, though you'll see that in OOP Hard Parts. Specialize in OOP Hard Parts, but more important to us right now, they have a property. Nothing magical, when you see the doc prototype, we think, maybe there's some kind of magical bonus in all that. It's a property of an object and the name of the property is what Braden?

[00:09:31]
>> Braden: MultiplyBy2.
>> Will Sentance: Not quite, Peter, the name of the property is?
>> Peter: Prototype.
>> Will Sentance: Prototype. Exactly, that property is just prototype and o. Here is where it gets interesting. It's always on that all functions in their object format automatically have a property on them. I mean, why did the dot dot dot, actually was that automatically there, called prototype?

[00:09:53]
It is not a hidden property. It's like a it's a property on the object bit. We just don't tend to look at this bit. We'd need to console log multiple by to press a little down. I mean, I guess the objects kind of hidden from us and it's on there.

[00:10:07]
What is it? Dan, what is the prototype property default to be?
>> Dan: Empty object.
>> Will Sentance: A big old empty object. Look at that. Meaning, the function that we're gonna use new one when it gets executed and it creates an object automatically that desperately needs a place to link to, an old big empty object, in which to store our functions with us to store functions.

[00:10:35]
That function is not just a function, it's also a what Jeff?
>> Jeff: An object.
>> Will Sentance: An object. And that object is not empty, it's got what in that?
>> Jeff: A prototype property.
>> Will Sentance: A prototype properly, nicely put, which is what, Mark?
>> Matt: A big old empty object.
>> Will Sentance: Where do we think folk that it might make sense for us to have the new keyword or for JavaScript to have decided the new keywords auto created object inside the running of the userCreate a function for it to have its protocol connection be to if it can't specify that its user function store?

[00:11:15]
Matt, where do you think it might make sense?
>> Matt: The prototype property.
>> Will Sentance: Prototype property of the function that we're then going to run the new keyword or we're going to run with the new keyword on such that it creates an automatic object inside. And that's gonna have a bond for its proto property to that prototype property, which is an object.

[00:11:34]
The protocol is going to not link to use the function store, but link up to this object. So we better put our functions that we want all objects that come out of the auto, or come out to running user created with the new keyword in front that creates an object automatically, which needs somewhere to have a link to for its shared functions.

[00:11:55]
They're automatically gonna be that function that creates the object with the help of the new keyword in its object version, in the prototype property of it, which is itself An object.