Prototype Walkthrough

[00:00:00]
>> Will: All right, here we go. Michael, take it away. Line one, what do we do, my friend?
>> Michael: We're declaring a new function called userCreator.
>> Will: Talk really, really slowly, Michael, really, really slowly while I erase my board.
>> Michael: So we're declaring a new function called userCreator and accepting arguments of name and score.

[00:00:20]
>> Will: Perfect. Name and score. Well yeah exactly, well, parameters of name and score, right? Arguments are the ones that we refer to when we execute the function, the actual values we pass in as our arguments. The placeholders, the parameters receive the arguments. So the name and score parameter is excellent, there it is stored in memory.

[00:00:42]
Michael, next line of code, tell me what the next line of code is.
>> Michael: We're declaring another variable called newUser, we're creating an object.
>> Will: So, Michael, to go inside of a function, we have to do what? For JavaScript to go inside of a function's body, we have to do what?

[00:00:58]
>> Michael: You have to invoke [INAUDIBLE].
>> Will: A-ha! So this is a big tip. When you're reading through your code, never let yourself look at function bodies, that means the innards of a function, until you invoke it. Otherwise, you are dealing in hypothetical, because there is no newUser. Because there is no name at this point, there is no score.

[00:01:17]
So we never go inside of a function until we execute it. So the function store, there it is. And what is our next line there for Michael?
>> Michael: Within the function? Is that what you're asking?
>> Will: Well we don't go inside of a function until we call it.

[00:01:32]
So in fact if we never called user creator, we would never see any of that code. JavaScript would never interpret any of that code and that function. So what therefore is actually our next line of code. Nick,after we've declared you the creator,
>> Nick: Then we would go to, we'd declare the constant user function store.

[00:01:51]
>> Will: Exactly. Which is?
>> Nick: An object.
>> Will: An object, and what other properties we immediately store on that object, Nick?
>> Nick: The key name of increment which is a function, and then another of login which is also a function.
>> Will: Perfect. So our property increment and login are both functions.

[00:02:12]
Okay. Beautiful. And now, note folks, if you were to do what Michael was doing, have a little sneaky look inside user creator, you'd see we're probably not gonna be assigning any increment method to it. But we are gonna create an object, that somehow looks like it's got some sort of connection.

[00:02:35]
We're not sure how or what, but some sort of connection to user function store which, look what it has on it. An increment method. All right, so Elliott, we've saved user function store. it's got increment login, we've saved user creator, we've done our setup. Now, Elliott, take me to the creation of an actual user, user one.

[00:02:59]
>> Elliott: So a new constant is created, User 1.
>> Will: Yep. So, User 1 is going to be the return value Elliott, of calling what function?
>> Elliott: User creator.
>> Will: User creator with inputs Phil and four.
>> Elliott: Phil and four.
>> Will: Let's create that execution context, start talking me through it Elliott.

[00:03:22]
Into it we go and in the local memory, what is the first thing that we put in there, Elliott?
>> Elliott: The first argument name.
>> Will: The first argument which is?
>> Elliott: The first parameter.
>> Will: The first parameter which is then assigned the argument what?
>> Elliott: Phil.
>> Will: "Phil", beautiful, thank you Elliot.

[00:03:40]
And now, Terry, next line. We're calling, we've passed in Phil's name, and we're gonna pass in?
>> Terry: A score of 4.
>> Will: Score of 4, perfect. Now we hit the body of the function. We need to create our object. But ideally, we need our object to have a bond to this user function store over here.

[00:04:01]
So that, when it gets returned out and we wanna use functions that are not directly on the object, somehow we still have access to them. We're not gonna see exactly how the bond is made quite yet. We're gonna see in a moment. But for now, that right hand side always, whatever we pass in, it always returns an empty object.

[00:04:22]
So, what do we have stored in new user at the point of the end of that first line, David?
>> David: An empty object.
>> Will: A big old empty object. But an empty object, let's even say right now, an empty object with somehow a bond to this function store, user function store object.

[00:04:46]
We're not sure how, we just know that somehow this built-in function object dot create always returns an empty object. But that empty object sorta has a kinda connection to user function, but we don't know how yet. But we'll see how, all right and into that object we are going to add properties.

[00:05:03]
Seth talk me through adding the properties.
>> Seth: A property called name contains the value of the name variable.
>> Will: Name parameter
>> Seth: Parameter.
>> Will: Perfect.
>> Seth: And a score property that contains the value of score, which is four.
>> Will: Perfect, and do we add an increment function? I do not see it.

[00:05:23]
But there's out object. Seth, how do I get it out into user one?
>> Seth: Return it.
>> Will: I return it out into User 1, into User 1. There it is. Out comes the object. Now note people, we return out new user. Well I prefer to say, this is what Jarvis Word does.

[00:05:49]
It goes, return newUser and it says, what is newUser. It goes and looks in memory. It finds the object. We return now the object that is currently designated as newUser. We don't return out its name. We just return out, return use, is this object. Return out the object.

[00:06:08]
Give it a new global label. Never, I don't like even like the verbalization return new user, it implies somehow that new user comes out as well, no no, just the value of new user, which is the object. Return out the value of the new user, which is the object in to the global constant User 1, where we have name is Phil and score is 4.

[00:06:31]
And still, this bond, somehow up to userFunctionStore. We don't know yet how, but still, it's there. And folk, this is stuff we've seen before, to our audience online, in hard parts. But this foundation is gonna give us access to all the complexity in to come. All right, so there we go User 1.

[00:06:55]
We have our object. It has a bond to User function, so we're not sure how, but it has a bond. By analogy, Susie, User 2 just by analogy, User 2 would have what? In it, Susie.
>> Susie: The Julia?.
>> Will: We have a property of an object with a property name, which would be Julia.

[00:07:19]
And then, David.
>> David: A score of five.
>> Will: Score of five, and a hidden bond up to,
>> Will: User function store. We're not sure how, but it's going up there.