JavaScript: The Hard Parts OOP Exercise, Part 3

Transcript from the "OOP Exercise, Part 3" Lesson

[00:00:00]
>> Will Sentance: Okay. Our code is getting repetitive. We are creating brand new objects by hand for every single different user. Imagine our game, new user signing in, we're not going to be manually filling them out by hand each time. Develop a behind the scenes, there's got to be something different we can do here.

[00:00:19] What do we do when we have the same functionality being done again and again. We're just writing it, repeating it out again and again. What do we usually do when that happens?
>> Lindsey: Make it generic?
>> Dave: Modulize?
>> Will Sentance: Make it generic, modulize. How do we wrap up repeatedly used functionality in JavaScript Lindsey.

[00:00:38]
>> Lindsey: Classes?
>> Will Sentance: How do we wrap up just regular, if I wanna create Function, yeah. There are fancier things to come, but in its basic form, if we wanna repeatedly do something, how do we make sure we only have to write it once? Lindsey, if you wanna repeatedly do something, how do we make sure we only wanna write it once?

[00:00:59]
>> Lindsey: Generalize the function.
>> Will Sentance: We just store it in a function. It was such an obvious question, cuz someone literally said it twice, but you couldn't imagine I was asking it again. But exactly right, we just wrap up what we're doing and store it in a function,
>> Will Sentance: So if our goal here, the whole rest of this OOP session is how can I create Users, user objects, which represent each individual user's data.

[00:01:25] Where, also, all the functionality is available on each of those users. Will, score three, Tim, six, Lindsey, 12,
>> Will Sentance: Shelby Fifteen, exactly, and each of them has a functionality to increase their score. How do I make sure that I can create these objects easily? Well, the very simplest first way is rather than manually writing them out each time, is to wrap them in a function, to create a user creator function.

[00:01:59] But when it gets run with particular arguments, it goes inside, creates a new object, fills in the object with those arguments, returns out the filled in object, and stores it in user one. We're gonna muddle through this and see are we ending up in the same position as we did when we manually made our objects.

[00:02:18] All right. So line one, Bob. Bob, what's happening in line one of our code here?
>> Barb: Declare function user creator.
>> Will Sentance: User creator. Good, good, good, good.
>> Will Sentance: Declare a function use Creator and store it in our global memory, okay.
>> Will Sentance: Store it in our global memory, userCreator, there it is, and it's the whole function definition.

[00:02:56] And it's a big ole function and it has a lot of stuff. Okay, next line that we call or do we run, Muhammad.
>> Muhammed: We do let user1.
>> Will Sentance: Okay, so we declare user1. Do we know what's gonna be stored in user1 yet?
>> Muhammed: Not yet.
>> Will Sentance: We don't.

[00:03:13] It's undefined for now. But we're gonna go and run this userCreator function that we just declared Let's go call it. Here it is, and we're calling it with, will and 3, and we say whatever is gonna come out of this function being called is gonna be stored in the place, currently just a placeholder, user1.

[00:03:39] Okay, so now, we call this function, everyone together? We create a new
>> class: Execution contest.
>> Will Sentance: You're very kind to show such energy each time everyone. There it is. userCreator has execution context with will and 3 passed in. And so we have our local memory. Of our execution context.

[00:04:06] We have the call to userCreator function. Top of the call stack,and here we go. Dave, first thing we do inside the call to userCreator is handle our arguments isn't it? So tell me a bit about that. What's the first one we handle?
>> Dave: Will.
>> Will Sentance: And what's it filling in?

[00:04:26]
>> Dave: Name.
>> Will Sentance: Name, exactly. So name, try that again. The name parameter is assigned the argument, the value Will.
>> Dave: Name is the parameter and the value is Will, is that what I should say?
>> Will Sentance: Yeah, that's fine. There it is and score therefore is, 3. Okay, Lindsey into the function body we go, what's it tell use to do?

[00:04:53]
>> Lindsey: To create a new empty object. New user.
>> Will Sentance: New user. There it is. New empty object, new user. And what do we do in the next line? Lindsey?
>> Lindsey: We create a new property of name
>> Will Sentance: Yeah. And assign it what value?
>> Lindsey: Name.
>> Will Sentance: Yeah. Which is?

[00:05:14]
>> Lindsey: Will.
>> Will Sentance: Yeah, so let's. It's easy to get confused between these, the name is the auto. When we do new user dot names, it's not because new user already had a name property. We are automatically creating the name property in that sort of step. You can imagine, we have to declare name with a property, we just announce it and assign to it the value of the name in local memory, which is will.

[00:05:34] Okay, next line Lindsey.
>> Lindsey: Create the property score.
>> Will Sentance: And assign it the value?
>> Lindsey: Of three.
>> Will Sentance: Three, perfect. And then the property increment, and assign it the func or declare, and decide it the function that we see there. And then, what do we do, we.
>> Will Sentance: Lindsey?

[00:05:53]
>> Lindsey: We return the new user.
>> Will Sentance: We return out that whole object to the value, which is the object. Out it comes and it gets stored in what variable?
>> Lindsey: User1.
>> Will Sentance: User1, exactly. User1 is now that whole object, this is looking good. It looks like we've achieved what we did before.

[00:06:16] Very nice. Score 3 and increment. We returned out the object and stored it in user1. Good, we've achieved what we did before and we wrapped up the functionality and then called it with the actual values. Okay, let's do this one more time to make sure we're really generating our two objects.

[00:06:36] So back to global execution context. Where we encounter what line? Who's not been called on for a bit? Mohammed, what line do we encounter? I asked you this question before, didn't I? See, I have this amazing ability to ask exactly the same person. Katy, what is the next line we encounter?

[00:06:53]
>> Katy: We set the variable user2-
>> Will Sentance: Yep.
>> Katy: To, well-
>> Will Sentance: Well, what's the posh way of saying? We don't yet know, do we?
>> Katy: We declare it.
>> Will Sentance: We declare it, and it's gonna be eventually the return value of calling userCreator. The return value, the output. So, there we go, we've gotta go call.

[00:07:11] What do we do when we call a function, Katie? Create a new.
>> Katy: Paranetheses, execution-
>> Will Sentance: Execution context, there it is. And push the call of the function, userCreator to the top of our cool stack with these arguments. In we go, get a little local memory, and Katy, just told me through filling in the parameters.

[00:07:39]
>> Katy: Reset the name parameter or input to 10?
>> Will Sentance: Yep.
>> Katy: And then we set the score input to value five.
>> Will Sentance: Look at that, unprecedented, way of doing it. Well, I mean that's fine, that's fine. I think there's nothing wrong with that. That's the same thing as I just did there.

[00:07:58] And then we do what? We declare what Katie?
>> Katy: We declare newUser as an empty object.
>> Will Sentance: Yeah, there it is. And what do we store in it?
>> Katy: And then we store the name property.
>> Will Sentance: Yeah, with what value?
>> Katy: And the value of 10.
>> Will Sentance: So this name here is score's all there, then score, which is 5, and then, look at this.

[00:08:18] We declare a function increment, we declare our function increment. Then we hit the end of that function body, and what does it tell us to do? Andrea?
>> Andrea: Return user2.
>> Will Sentance: Exactly, return out into user2. This whole function and that's what we do. So this whole object, that's what we do.

[00:08:43] Name Tim, here's your turned out score. Five and increment is a function. Have we achieved exactly the same as we did when we declared our object manually? We have, we said our goal here today was to, well one thing me to add. Can we fulfill our fundamental goal of running our functionality that's relevant to our object, our user data, individual user data, immediately on the user itself?

[00:09:21] Can we do it? Let's test it out with user2.increment. We can skip user1, we'll just do user2.increment. Let's see, user2.increment, there it is. We finished running user creator first and the second time, we now hit user2.increment. Let's be really precise about this. Lindsey, when JavaScript sees this line what does it do first?

[00:09:47]
>> Lindsey: It-
>> Will Sentance: What's the left, what this bit say?
>> Lindsey: It finds the object user2.
>> Will Sentance: Go ahead. Say that again.
>> Lindsey: It finds the object user2.
>> Will Sentance: Exactly, it says what's user2? Let me look at them here. Don't worry, there's user2. And then it says, we're looking for a property called increment which supposedly is a function.

[00:10:05] Let's see, yes there it is, and it's a function, great. So now we can create a new execution. We've achieved our fundamental goal. Our fundamental goal was, can I bundle my functionality that could ever be relevant to my user? Right now, we've just got increment. But we could easily have a hundred different functions that could be relevant to each user being attached directly to the user1 object, the user2 object, has all the functionality available, hooray.