Create object with Factory Function

[00:00:00]
>> Will Sentance: So here we go. We can do it in all of our solutions to our really manual find green sophisticated solution 3, and new keyword tidying up, and for a class implementation that looks very, very clean. But under the hood is just gonna be solution 2,
>> Will Sentance: And solution three.

[00:00:22]
All right, let's see it. The most code I ever have on one slide ever. Subclass [INAUDIBLE], by the way the name of that solution two we saw where we manually create the object and return it out and make it born to some functions, that function type is known as the factory function.

[00:00:40]
Who knows why, nobody knows. But I've gotta stop saying that, probably somebody knows, and I shouldn't say nobody knows. Nobody know, nobody knows it's a mystery. A long with, what was our other mystery which direction Saint Paul is. I actually can see it so it now so it's no longer a mystery, but it was for a long time a mystery.

[00:00:56]
This function here userCreator is known as a factory function, cuz it produces. Doesn't really matter, not really, but it's known as a factory. We, if you look at this left hand side here, it is exactly the same as the code we saw earlier. We've got a cool userCreator, no new key word here, no automations here, we're doing all the work ourselves, we're making the object.

[00:01:18]
We're making it have a bond to a set of shared functions. I'm not calling it functions store, I've called it functions store before, right? Some call it user functions. I just change it, it doesn't matter, that's the point, we can call it whatever we want as long as we link to it by name when we create the object.

[00:01:32]
We're then gonna return that over to that all by hand. No new keyword tidying this up for us. All by hand. And then look over here. Hopefully, you can see it. We have a new function. It's just gonna continue down, so continue its way across. We have a new function.

[00:01:48]
Paid userCreator. And a new set of shared functions for our paid users. We've got on there increased balance because paid users get a balance. And when we call paid userCreator with Alyssa and 8, that's gonna create our name and score property on our paid user object. But do we wanna rewrite the code to assign those properties, especially when typically a user's not gonna have two properties, name and score.

[00:02:16]
He's gonna have like 50 properties. Do you wanna rewrite all that assignment code? No, so we're gonna save ourselves by using, look at that. Do you see our userCreator function's gonna be used inside of paid userCreator, we're gonna use our userCreator code inside of to create our new paid user.

[00:02:34]
Then we're gonna have to make a little bit of fiddling, because it's gonna have some things that are wrong. It's gonna have, for example, it's proto reference is gonna be to the user functions, where as we want it's proto reference to be to the paid user functions knowing that that object will have a link up to the user functions, so we'll get all of them for our paid users.

[00:02:53]
And we're gonna have to add some little new bonus properties like account balance. So this over here is us creating a more specific type of user. So this is the other big side of OMP. Thinking about our application as ever more specific versions of a kind of master class, kind of master version of something, but not having to redo all the work that we did for the first version that produced the generic users, but instead use a bunch of that work ourselves to produce paid users, produce moderators.

[00:03:23]
So we're gonna produce a paid user. There's gonna have access to all the users stuff, and I'll talk briefly about how we could say prevent it from having access to some of the user stuff, and also gets bonus stuff. And folk, this version here is the fine-grained control version, we get to do everything by hand here.

[00:03:43]
Solution 3, using the new keyword, is going to automate some of it. But actually, honestly, create more trouble than it's worth. Which is why solution 4 came along and it's a lot less code. It does clean it up, but nobody knows how it works under the hood. We will.

[00:04:04]
Okay, good, here we go. Let's walk through this code it's also going to be a lovely chance for everybody to re familiarize themselves with this factory function approach, and we'll really have it down by the end. [LAUGH] So focus folk on your technical communication. If any of you are feeling, yeah, when we do the left-hand side yeah, we saw this earlier.

[00:04:24]
Well, use this as a chance to really exemplify excellent technical communication, so that you are rapidly promoted. You're in demand when that VP of engineering who's watching today's talk, shoutout to you, says, who is this Seth character? Who is this Susie character? We need this sort of quality of technical communication.

[00:04:52]
Let's have that VP of engineering when she hears your voice. Go asking Mark for who you are [LAUGH]. All right, excellent. Here we go line 1, let's have Susie. Take it off, Susie, left hand sign talk left hand, what we are doing there?
>> Susie: We are creating a function called userCreator.

[00:05:11]
>> Will Sentance: Excellent, now occurs a functional object combo but we not gonna use it's object portion here because we're not using a new keyword when we call it which does use a bunch of the object stuff, so we just leave it as a function for now. But it is, of course, always a function object combo, we just don't need to worry about the object bit.

[00:05:26]
Okay, next line let's have Chris.
>> Chris: Next line, we're creating an object user functions.
>> Will Sentance: Excellent, these are where we're gonna store our, I guess they call them singletons. That's sort of a crazy name for them. You've got single copies, that single versions of the functions and you want all objects that come out according to the userCreator, user one, user two, to have access to.

[00:05:53]
Okay, so Chris what's on the user function's object?
>> Chris: Property, same name function.
>> Will Sentance: Okay, same name. So I've changed these slightly but that's okay, the same name and then the other one?
>> Chris: Increment property function.
>> Will Sentance: Increment, excellent. All right, increment. There it is, increment. Beautiful, thank you so much, Chris.

[00:06:15]
Next line, let's start building our specific object. Michael, left hand side?
>> Michael: Creating a variable called user one.
>> Will Sentance: Little fix there, Michael. Even though people do use the term variable somewhat generically to mean label for data, it really can't vary per se, so I would just call it a constant user one.

[00:06:34]
>> Michael: Okay.
>> Will Sentance: Constant user one is uninitialized for now while we go off and call.
>> Michael: User creator.
>> Will Sentance: User creator, fantastic. User one is going to be the return value of calling user creator with the input of fill and five. Create-
>> Michael: Execution context.
>> Will Sentance: Michael, in time with the chorus, we create?

[00:07:02]
>> Michael: Execution context.
>> Will Sentance: We create?
>> Michael: Execution.
>> Will Sentance: Beautiful, Michael go ahead Michael. You do the solo. Excellent, thank you. We are calling userCreator, creating an execution context inside. And first thing we handle, Seth, pull me through.
>> Seth: Name and score are instantiated with the arguments that were passed in.

[00:07:25]
>> Will Sentance: Yeah, that's not a bad way of putting it. I have no problem with that. Yeah, instantiating is uninitialize, they're given their values, yeah. Do not think, anybody, that this is putting stuff in an object. These are local parameter argument combos, they are not in an object. I know this function was create an object, but parting an argument does not put those properties in object.

[00:07:46]
We have to manually do that. Never lose sight of that, especially the new keyword they make you think that we're sort of doing that. We never get to directly pass into a function argument and they just appear as properties. No, no, they're put in local memory. Then we grab them from there, stick them in an object.

[00:08:04]
That's what we're about to do. Let's create that object, though. Elliot, let's create that object.
>> Elliot: So a new constant is created, new user.
>> Will Sentance: Excellent [INAUDIBLE], which is?
>> Elliot: The value is initially an empty object.
>> Will Sentance: It is exactly an empty object. Never lose sight that object all created is a built-in tool available to us in JavaScript.

[00:08:26]
Where is it stored? Not on object.prototype. I don't want to even bring this up. Do you remember how we said there was a big, old auto-available thing called object, that is a, I'm not sure I should be bringing this up. This is very distracting right now. Which is a function object combo, everyone remember this from a moment ago?

[00:08:43]
Which had a property on it, Seth?
>> Seth: [INAUDIBLE]
>> Will Sentance: Prototype where any function, it was an object, with any functions like set prototype of our stored, and available therefore to the right hand side of the dot of any object. But actually this object it's a funny old one, sorry, this function object combo's a funny old one, cuz you know you could also store functions directly on it, like create, which is a function.

[00:09:14]
This function is not available. We can't just use the functions.create,because there's no function called create in here, but we can do object.create, and run that function. And that's what we're doing here. That's where that's stored. Nothing is hidden in the JavaScript. Nothing is just there. It is all explicitly available in these built-in couple of things, the function object combo object, the function object combo, which both has the set of functions available, all objects by the proto reference, but also has some functions like create on it.

[00:09:43]
Were the other ones keys or something? They're all just stored down here in this object, function object combo.
>> Will Sentance: [LAUGH] Don't we love this language? Beautiful, all right. Just a little side there, that object.create isn't coming from nowhere, it is an available function built into JavaScript. Okay, but what it does, whatever you pass into it is returned and empty object, there it is.

[00:10:05]
But what, David, is that empty object hidden proto bond linking to?
>> David: User functions.
>> Will Sentance: User functions, fantastic, thank you man. There it is, into user functions. Let's fill in these properties now. Susie, if you don't mind filling in the properties. So we've set up the new user as an object, it's got the user function bomb in the hidden proto property, but let's now fill in our actual properties on it.

[00:10:32]
New user.name. Take it away.
>> Susie: So, we, wait what?
>> Will Sentance: We just want to add the new user.name. We're assigning to the new user object, what?
>> Susie: With name.
>> Will Sentance: Name, fantastic. A name property and assigning it, what is name at this point as you passed in, Phil, what is name, the parameter going to refer to?

[00:11:01]
So we're calling userCreator, we're passing in Phil, we're passing in five. And so name is now what, Susie?
>> Susie: Our name is Phil.
>> Will Sentance: Our name is Phil, fantastic. So what are we assigning to our name property of new user?
>> Susie: Past string value of Phil.
>> Will Sentance: Fantastic, she's following, exactly.

[00:11:17]
Thank you, Susie. And now again, we are assigning a score property, and assigning to it, what value?
>> Susie: Five.
>> Will Sentance: Five fantastic. There it is, and now what is the final line of this userCreator execution context telling us to do, Nick? We've got our lovely object, it's all good to go, but it's stuck inside user creator, what have we got to do with it?

[00:11:37]
>> Nick: It's gonna be returned.
>> Will Sentance: It's gonna be returned out into?
>> Nick: Memory.
>> Will Sentance: Under what global constant?
>> Nick: User 1.
>> Will Sentance: User 1, fantastic. So we know this piece, we've seen this piece. Well, we're getting tight for space here. We know this piece, we've seen this piece, we like this piece.

[00:11:55]
But now it gets interesting. So into User 1, and it is returned out as this object. That's its object with name Phil, score 5, and it's hidden proto bond. And I'm gonna do the hidden proto bonds now in purple. Its hidden proto bond up to this object, user functions.

[00:12:29]
Meaning, let's do our little check, let's not get ahead of ourselves, let's do our little check to make sure it's working. Terry, final line there of that code, user1.sayName. Taught me through JavaScript's lookup process for user1.sayName. Looks in the in the user 1 for the method sayName.
>> Terry: It does not find it.

[00:12:53]
>> Will Sentance: Correct.
>> Terry: It goes to the proto. Points up to user functions where it finds sayName.
>> Will Sentance: Fantastic, Terry. And you gave us a score of four in the? That was interesting. Very, very nice Terry. You're spot on man. So we are successful. We have a lovely user 1 that has access to a set of functions.

[00:13:15]
Beautiful, but now we want to create a more specific type of user. Now we move on to some fairly brutal code over here on the right hand side.