JavaScript: The Hard Parts, v3

Generate Objects Using a Function

Will Sentance
Codesmith
JavaScript: The Hard Parts, v3

Lesson Description

The "Generate Objects Using a Function" Lesson is part of the full, JavaScript: The Hard Parts, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Will explains how to create user objects using a function to avoid repetitive code, following the "Don't Repeat Yourself" (DRY) principle. This approach allows generating multiple user objects efficiently without manually writing each one. He also highlights how the increment method works as a method on each user object and how the function execution context handles parameters and object creation.

Preview

Transcript from the "Generate Objects Using a Function" Lesson

[00:00:00]
>> Will Sentance: We have created our three user objects for our game, and each of them, when they get a point, they're able to have the increment function run and increase their score. Are we done? We have an object-oriented paradigm. But I had to manually write out and add the properties of each of these objects one by one. Our code is getting repetitive. It's breaking what principle? Everyone together: DRY, don't repeat yourself.

[00:00:28]
And we might have millions of users. I don't have millions of users. We have a lot of users, and I don't want to have to sit behind, I don't want, as an engineer, every time a user logs in, have to type out their, that's not how we do it. But I don't want to have to do, what do I do? What do I wrap up work that needs to be done many times in programming in general, but particularly in JavaScript? What do I wrap that work up in, people, where I want to do work again and again?

[00:00:52]
I wrap it up in a function. Well done, people. Yeah, I know that, because, yeah, that's exactly right. Let's keep it intuitive, right, exactly, in a function. And I think that's exactly what we do here: generate our objects using a function. And our first approach here, people, to our object-oriented paradigm, producing objects that have both our user data on and the necessary functionality, our user data on and the necessary functionality, our user data on and the necessary functionality.

[00:01:22]
It's going to be merely producing those objects. I don't even say generate, just like running a function that produces an output, an object, and then passing in the details of each object to that function. Solution one: generate our objects using a function. And there it is, a function we're going to call userCreator. In it, we're going to go, when we jump down and call it further down the code, we're going to pass in Ari and three that are then going to be the arguments assigned to name and score, respectively, our parameters.

[00:01:56]
We're going to create a new object inside called newUser. We're then going to assign to it, dynamically, a property name and assign to it the value of the argument name, which is Ari, and then the same with score, which is three. And then we're going to attach our increment function. Mm-hmm, no problem. And I hope we're going to get out of it a good old regular user. Let's do it, people. And oh, hopefully this will be a viable solution and not one that is completely and utterly untenable.

[00:02:31]
I can only imagine it's going to be viable and effective, and we're going to feel really good afterwards, aren't we? So in line one, as I erase the board, in line one, Joe, what are we doing in our, oh actually, sorry, Brady. Brady, what are we doing in our line one of our code as I write this down? What are we doing in line one of our code? We are declaring the function userCreator. Beautiful. And storing it where?

[00:03:03]
In memory. In global memory, exactly. UserCreator is a function. Isn't it nice for people to go back to something a little bit more vanilla than the, mega, nice hat, Joe, than the extraordinary scale we had before? I'm sure it's very relieving. And Brady, we now jump down to declare what constant? User one. User one. And for now it's uninitialized while we go and do some work, because we are going to call what function, Brady?

[00:03:35]
UserCreator, and pass in what inputs, what arguments? String Ari and number three. Number three. And we're going to create, everybody together, a brand new execution context. Yes. And for those of you online who are going to write in the comments, does he have to keep doing that? The answer is emphatically no, and you're right. Why do I do it? That is why is a question that only an expert therapist could possibly answer.

[00:04:09]
And into it we go. And in the local memory, we are going to start with our argument and parameter combinations. Tenzin, our parameter, our first parameter we handle is what? It's name. Yes. And we're assigning what to it? The string of Ari. Exactly. And the next is? The next one is score, and we're assigning the number three. Beautiful. And then we enter the body of the function of userCreator, and we start executing its code.

[00:04:36]
The first thing we declare is what? We declare an increment function. Ah, what's the first, ah, it's easy. I hope you saw there, Tenzin was potentially starting to use the body of the code where the property assignment's happening at the moment of calling userCreator. We're starting off only with dealing with our name score parameter that are filled in with Ari and three right at the top of our userCreator's local execution context.

[00:05:04]
We don't actually do, where you see newUser.name equals it, we haven't touched any of that yet. That's all to come after we declare what constant, Tenzin? I see, a newUser. NewUser, exactly. But do you see how easy it is, people, to sort of think that we're doing something more when we pass in Ari and three than just filling in these local, this is not an object, the local memory is our store of data live in that function.

[00:05:34]
We've got to create an object which we called what, Tenzin? What do we call the newUser? Exactly. And now we're going to add some properties to it. What is the first property that we add in the next line? Tenzin, what's the first property, not the value we assign to it, but the first property that we add? The name. The name, exactly. The first key we add is name, and then we're assigning to it name, which is what in our local memory?

[00:05:58]
Ari. Ari, well done. We then do the same with the next line. We assign a property. We're going to, you know, it's a bit of a funny system, right, that can either be a lookup, go and look to see if there's anything in name, or an assignment, depending on where we're using it. Here it's an assignment. It's saying, hey, store and create, not even that, not even an assignment, saying like, it's saying, hey, score, if it doesn't exist yet, make it as a property name, make it as a key.

[00:06:27]
And we do make the key of score, and we assign what to it, Tenzin? We assign number five. Yes, score the parameter value, the value of the parameter score, which is three. Perfect. And finally, we do, as Tenzin said, add what to our newUser object? We add the increment variable. The increment. And what's the function known as on an object? A method. Well done, Chris. And there is our object. Now we hit the return statement which says return newUser.

[00:07:07]
What is our point with me, Tenzin, to return user, what is our, oh, this is ridiculous. Sorry, Tenzin. We're going to return what? The object. The object, spot on. Do we care about the label newUser? We're returning the object out into global, where it is stored in what global label, Tenzin? It's called user one. User one, spot on. There it is, with name Ari, score three, and increment is a function.

[00:07:43]
Beautiful. I think for some reason, because I want to put us all through this, we are going to do it again, because I want us to get this really precise. Are we going to do this again? You bet we are. Oh my goodness, because I want us to know that when we now call userCreator again, this time, Tenzin, with what arguments? It's Jay and five. Jay and five. Brand new execution context. I'm not going to put you all through that again.

[00:08:18]
Into it we go, and in our local memory, in our local memory, what's our first parameter argument combination in our local memory, Tenzin? Help us out with this. First one is name is set to what? Yep. And it's set to Jay. Yes. And then the second one is score. Yep. Then it's set to five. Beautiful. We then hit the body of userCreator where we declare what? We declare the new const user. Yep, newUser, exactly, which is a big old what?

[00:08:50]
It's an empty object. Empty object. We now create the name property on it, people, and assign it the value of the argument that was passed, or the parameter now, which is name, which has been assigned what argument value at this point, Tenzin? Jay. Jay, well done. Well done, Tenzin, thank you. And then score, which is now evaluated, so we assigned the score property, newUser.score, says put a score property on and score what on it?

[00:09:25]
Five, which is the argument value of the parameter score, exactly, which is now five. Well done. And then what do we add to our, to our newUser object? Then we add the increment method. Perfect. We add another fully saved increment function. We need it because we need to have this object also, when it gets used later on, have access to that increment function. What do we do with this object at this point, Tenzin?

[00:10:03]
Oh, we just, we then return it. Out into what global constant? Back to the user two. Exactly, back to and out to user two, where we now have name Jay at score five and our increment function. Beautiful. And now we do our all-important check. Can we do all we dream of doing, which is run our method on our user one data, run our method on our user two data? Let's test it out. User1.increment. Can we invoke it?

[00:10:38]
Chris, help me with a lookup. Where do I look? Well, what's my lookup journey here? User one. Yep. Do I find it? Yes, we do. And what do I look for? Do I find it? Yes, I do, so I create a new execution context. Well done, people. Ah, interestingly, and that's great, I'm happy, I'm happy. Note that the code says newUser, but there's no newUser in global. Anyone remember what might have been happening here, Chris?

[00:11:04]
Closure. Our backpack, exactly. The increment function, despite being saved on an object, still gets access to even its original name for the object that now is called user one or user two, respectively. These are totally separate backpacks attached. We're not going to dwell on that much here. All I care about is, can I find my increment function? Yes, I have an increment function on user one. I added it myself.

Learn Straight from the Experts Who Shape the Modern Web

  • 250+
    In-depth Courses
  • Industry Leading Experts
  • 24
    Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now