new Keyword & Share Functions with prototype

[00:00:00]
>> Will Sentance: And now, folk, we're gonna start to see the more standard approaches. But we're building up to them from how they're working under the hood so that we're properly able to debug them, that they're not mysteries. And by the way, so we're probably able to answer questions in sort of senior dev interviews.

[00:00:22]
So that those of us who are always aspiring to senior dev, why wouldn't we? Have the knowledge under the hood of how these things work. All right, line 1. Terry, my friend, what are we doing in line 1?
>> Terry: Creating a new functionary UserCreator.
>> Will Sentance: Exactly, but do not think that cuz it's got a capital letter it is anything except for a regular function.

[00:00:50]
I actually meant to take the capital letter off, it is just a regular function, no different. Capital letters don't mean anything to JavaScript. Okay, UserCreator is declared as a function. But does anyone else want to give me the full story of what happens when I declare UserCreator? Chris, you're gonna give me the full story.

[00:01:14]
>> Chris: It is an object.
>> Will Sentance: Exactly, it's a function plus object.
>> Will Sentance: And that object has by default, Terry, what property?
>> Terry: Prototype.
>> Will Sentance: Prototype, not protopeople, prototype. Which is what, Seth?
>> Seth: It's an empty object.
>> Will Sentance: A big, old empty object. Exactly, there it is. That was all from just declaring the function UserCreator.

[00:01:46]
The code of the function, that's stored here, we access it to run it by using what notation, to access the function code, to run it?
>> Michael: Parentheses.
>> Will Sentance: Parentheses, the object, it was accessed using what notation, Michael?
>> Michael: [INAUDIBLE]
>> Will Sentance: Dot notations. All right, there's our object. This is our replacement for function store, that's where we stored our single copies, or single versions of each of the functions we wanted.

[00:02:15]
Our objects that come out of UserCreator to have access to. Remember, we're only running UserCreator to get out objects that have all the data of each particular user, name Will score, name Phil score for, and access to all the appropriate functionality for that data. Ideally so that we can always pretend that the functions are actually on the object by going, objectname.function, and apply to that data.

[00:02:41]
That's all we're trying to do, is run UserCreator to return out objects. That was all we were doing before.
>> Will Sentance: That's all we were doing. We're turning out an object into user 1 that had a bond to that store of functions, but now we're gonna save ourselves doing a lot of this work, making the object by hand, making the bond.

[00:03:02]
Well, making a store of functions by hand with a label, making a bond of that store. Returning out the object into user 1. Doing it again, returning the object into user 2. We're gonna save ourselves so much of that work by using what keyword, that's gonna automate a ton of that work?

[00:03:17]
Seth, what keyword?
>> Seth: New.
>> Will Sentance: New, exactly, is gonna automate a ton of that work. Let's do it, but before we actually create our individual object with the data of user 1, which is hopefully gonna be either a nine. We're gonna need to make sure we've attached, we've stored the functions we want that user 1 to have access to in our new auto designated place.

[00:03:41]
Elliot, remind me, what is our automatically designated place to store the functions we want? Any object that comes out of running UserCreator to have access to?
>> Elliot: The prototype.
>> Will Sentance: Yeah, let's be really explicit. The prototype property, which is an object of the UserCreator function-object combo. Good, cuz we've all said, probably many of us, many times go, we'll put in the prototype.

[00:04:07]
But what is this mysterious thing? It is that. Okay, Elliot, talk me through this demanding line here usercreator.prototype.increment. Talk me through the sort of assignment process here. What does JavaScript look for first?
>> Elliot: It looks for the UserCreator option.
>> Will Sentance: Beautiful, yep.
>> Elliot: And then the prototype property of the UserCreator object?

[00:04:29]
>> Will Sentance: Yep, of the function-object combo, it's its object version. We find the prototype property, which is an object. And, I guess, we assign to that object?
>> Elliot: Increment.
>> Will Sentance: Increment, fantastic, which is?
>> Elliot: A function?
>> Will Sentance: A method of function, exactly. There it is, stored, beautiful. And the next line, raise your hand if you want a shot at the next line?

[00:04:51]
Suzie, you down to the next line?
>> Suzie: Yes, on the UserCreator 1?
>> Will Sentance: Perfect, and we're looking up UserCreator, in memory.
>> Suzie: And then we're using prototype to get the function-object combo?
>> Will Sentance: Yeah, so we're using prototype to get the object bit of the function-object combo, yep. And that is itself an object into which we're storing what function?

[00:05:16]
>> Suzie: The log in function?
>> Will Sentance: Fantastic, so in the log in function. There it is, stored on the object with a label prototype, which is a sub-object of the object in the function-object combo, given the label UserCreator. Good, that's our setup done. Now let's go ahead and create our individual object that's got personal data of that user, but that object will still somehow have access to increment.

[00:05:44]
Cuz I definitely do not see any assignment in UserCreator of an increment method. So where is that increment method coming from? We do not panic, we know we're somehow gonna have a bond up to this object known as UserCreator.prototype. Okay, all right, let's go left hand side. What are we doing, Nick?

[00:06:08]
>> Nick: We are declaring the constant user1.
>> Will Sentance: Beautiful, there it is.
>> Nick: And then we are assigning a new UserCreator function to it.
>> Will Sentance: We never saw in functions 2 stuff, that right hand side is an unevaluated statement. It's like saying hey, we don't yet know what to store in user 1.

[00:06:28]
So user 1 will be uninitialized for now while we go and do what, Seth?
>> Seth: Creating a new UserCreator object function.
>> Will Sentance: This is why the new keyword is such a strange design. That right hand side is just calling what function, David?
>> David: UserCreator.
>> Will Sentance: Yeah, it's just calling a function, UserCreator.

[00:06:50]
But it's mutating the execution context of that function. It's fiddling around with when we call that function. Let's call the function, call UserCreator. Just like any other function, we call UserCreator and we assign our arguments to our parameters in here, and we create what? We create a new?

[00:07:15]
>> Audience: Execution context.
>> Will Sentance: Execution content. There is is, beautiful. But this execution context is going to have a ton of stuff done automatically inside of it, because we're kind of manipulating it by inserting what word before calling it, Seth? New, the new keyword is going to insert a bunch of stuff in here for us.

[00:07:44]
Almost literally, lines of code for us, so that we don't have to write them out each time. What is the first thing that it inserts, Seth? Do you remember the first thing that the new key was gonna automate inside of here?
>> Seth: This?
>> Will Sentance: The this assignment to?

[00:07:57]
>> Seth: To an empty object.
>> Will Sentance: To empty object, spot on. Well done, Seth. Exactly, before we do that bit though, before we do that bit, there is one other thing we've got to handle first. Nick, what do we always handle first when we call our functions, when we enter the execution context?

[00:08:14]
>> Nick: We assign the arguments to the parameters.
>> Will Sentance: Fantastic, the arguments to the parameters. The argument, either is assigned parameter name, the argument 9 is assigned the parameter score. And then the this keyword starts to take over. Everything in blue, people, is not done by us. It is done by us, only indirectly by us, using the new keyword.

[00:08:39]
So thing number one it does, create an empty object and assign to this. We want to save ourselves having to make the object. We are only running UserCreator to create an object and stick some properties in it. So if we're always running it to create an object, why not save ourselves work of declaring the object?

[00:08:59]
Why not have a function that does it for us? Well, JavaScript didn't do that. Instead it gave us a key word that does it for us. The new key word that mutates the execution context of UserCreator, it changes it. And automatically in the local memory, creates a big, old empty object.

[00:09:20]
But we've got to stick stuff in it. We've got to write codes to stick stuff in there. How do we refer to that object, Nick? With the keyword, this. That object is given and assigned in the local memory, the label this. Fantastic, okay? And there's object. We're not going to attach an increment property directly, so we need it to have access to this object over here.

[00:09:44]
What's the next thing the new keyword automates for us? Terry, you got an idea?
>> Terry: Prototype, puts in a method prototype?
>> Will Sentance: Not prototype, do you see why it's such a confusing- Proto. Proto, a hidden property, __proto__, which is a reference, a link to this object. So what if we were to console log this, press a little down arrow to see the hidden properties on this object?

[00:10:22]
We would see __proto__, and then we would see the words. Well, what words would we see, Seth, exactly?
>> Seth: Increment and log in?
>> Will Sentance: Yeah, but they're not directly saved here. What would we see? What object would we see labeled here to say to JavaScript, go look over there?

[00:10:36]
>> Seth: UserCreator?
>> Will Sentance: UserCreator, well, that object is this one here. That doesn't have any increment login property. So exactly what object is it, David?
>> David: .property.
>> Will Sentance: .prototype. [CROSSTALK] userCreator.prototype. So why we can't put the functions directly in the function's object version?
>> Will Sentance: Nobody knows, not so true.

[00:11:04]
[LAUGH] We'll see later on why, there's a good reason. But we have it as a sub-object of the function-object combo, not the actual object itself. It was not UserCreator, it's the UserCreator object prototype property, which is itself an object, that's where we're putting our functions. Does that make sense, Seth?

[00:11:23]
So that's where we have our proto link to. And that means this object, when it gets returned out into user 1, its little reference, its little proto thing, is gonna link up to a whole bunch of functions stored in that object. How perfect? All right, now finally we finish with our blue pen, our new keyword stuff, and we hit our work again.

[00:11:47]
What does our work say to do, Elliott? What do we write to do inside of the UserCreator function, Cole?
>> Elliot: Sign of property name.
>> Will Sentance: Beautiful, to the?
>> Elliot: To the this [CROSSTALK]
>> Will Sentance: To the auto created this object, and we're assigning to that name property?
>> Elliot: Eva.

[00:12:02]
>> Will Sentance: Which is our argument under the parameter name. Who wants to give a really complete description along the lines I was doing there of the score assignment? Nick, go ahead, my friend.
>> Nick: So the property name of score will get assigned the argument of 9.
>> Will Sentance: Fantastic, but where is that property score stored?

[00:12:27]
>> Nick: In the this object?
>> Will Sentance: In the auto created this object, exactly. Perfect, good, we have our full object. Name, Eva, score, 9, and it's got a link to its set of shared functions. But it's stuck inside of our UserCreator execution context. I don't want it in there.

[00:12:45]
Where do I want it, Michael?
>> Michael: On user 1.
>> Will Sentance: But I don't see any return. What do you thing the final thing that the new keyword saves us doing, Michael?
>> Michael: Return.
>> Will Sentance: Exactly, it's gonna auto-insert. 2, will set the __proto__ bond, and 3, is to auto-return the object.

[00:13:04]
So the final thing it does is to take that object and automatically return it at the end of the function, into user1, there it is. And there, folk, is our object, with name, Eva, score, 9, and a hidden __proto__ bond to this set of shared functions. And all of that stuff in blue, including the hidden bond, was automated for us by the new keyword.

[00:13:43]
Before, we created an object with functions that we made a bond to direct. We could've called it anything. We called it user function store, we could've called it Terry's functions. Good name, Terry's functions, whatever we wanna call it. As long as we made the link manually object.create and pass in Terry's functions, then the link will be off.

[00:14:04]
But now we're not gonna do that ourselves. So now we need a go-to place, a place that JavaScript will automatically set the proto link to, make our object have the link to, with the help of the new keyword. And it always makes the link to the name of the function that's being called with the new keyword in front.

[00:14:25]
The name of the function in its object format, the prototype property of that object format, which is an object. And we'd better put our functions there, which is what we did. Cuz now we know that that returned out object will automatically have made a bond up to there.

[00:14:41]
Okay, folks, so user 1 is now our object, no increment method on it, but it has our data and it has a bond to a shared set of functions. Can we do our all important check? Let's see. Chris, what is our all important check? Why am I even doing all of this?

[00:15:02]
I want my data and my?
>> Chris: And your functionality bundled together.
>> Will Sentance: Bundled together, exactly. Notice encapsulation, so I'm not puzzled. Now, JavaScript, by the way, does not implement strict encapsulation, that means I can still access data, and functionality, and objects flexibly. But I want to be able to know that my increment function is right there available to me on my user 1 data.

[00:15:26]
Well, let's see if it is, because I'm pretty sure it's not on the object itself. So let's walk through the look-up process, Chris. User 1, where do we look for it?
>> Chris: In the global domain.
>> Will Sentance: We find it, we look for the?
>> Chris: Increment method.
>> Will Sentance: Do we find it?

[00:15:41]
>> Chris: Not on the object.
>> Will Sentance: We do not, do we give up? What do we do? [LAUGH]
>> [INAUDIBLE]
>> Will Sentance: Yeah, we look at in the proto, which is a link to the prototype object on the UserCreator object, yeah. Yeah, well, we'd use the function-object combo, where we find?

[00:15:59]
>> [INAUDIBLE]
>> Will Sentance: Beautiful, fantastic, Chris, excellent. Folks, we are happy. And this, in the end, we're gonna discover Solution 4, which is our ES 2015 approach, doesn't really do much more than this. It just gives this function-object combo a fancy new name. Anyone know that fancy new name is?

[00:16:24]
>> Audience: Class.
>> Will Sentance: Class. Uh-huh, that's all it's gonna be under the hood, is a functional-object combo. Nothing is gonna change.