Check out a free preview of the full JavaScript: The Hard Parts, v2 course
The "Factory Functions Example" Lesson is part of the full, JavaScript: The Hard Parts, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Will diagrams an examples of a function that is generalized to accept properties that are assigned to a new object and returned. After demonstrating how easy it is to reason about and utilize in a codebase, Will makes the argument that the approach is unusable.
Transcript from the "Factory Functions Example" Lesson
[00:00:00]
>> Will Sentance: Let's get going, Jason, line one, what are we saving in our global memory [SOUND]?
>> Speaker 2: We are binding the label user creator, to the function, to the function time
>> Will Sentance: Fantastic. There it is. There's a function definition. Next line, over to Ethan, all the way down, to hit, what, on the left-hand side,
[00:00:19]
>> Speaker 2: Defining a const user one.
>> Will Sentance: By the way, I want to tell you people, just know how unusual you are, even in the professional engineering environment that you now just go, yeah, cool, JavaScript thread goes away down there. Like that is non standard, to even have that fully, so intuitive regrowth, what you did there, Ethan, excellent.
[00:00:36]
Now. My God, I just slept terribly. Wow! I'm getting tired. Why did I just do that? Sorry, everybody. Do you have any idea what's gonna go in user one? No idea. It's almost good that I did that, cuz it's like, we have no idea. Because we've gotta go off and do, what, Ethan?
[00:00:55]
>> Speaker 2: A call user creator.
>> Will Sentance: Right, and in the meantime, user one is definitely not an object, and it has no idea what it's gonna be, it's in fact instead?
>> Speaker 2: Uninitialized.
>> Will Sentance: Uninitialized, exactly. Thank you Peter, you're gonna say the same thing, that, as well, Ethan, so let's call user creator.
[00:01:12]
We're in the final straight here, people. Well, the final, the final, the final loop, the final straight of the final. All right, I don't know. I was meant to be moving on, alright, we're losing it. So, there we go, we're calling user Creator, brand new-
>> Speaker 2: Execution context.
[00:01:32]
>> Will Sentance: Execution context, spot on, exactly. Into it we go. Very intense at all of you. Into it we go. Okay, here we go. And in the Local Memory, let's have, let's have our friend, Dan. Dan, let's handle the first thing, we always handle when we execute a function call a function, and that is to handle our?
[00:02:00]
>> Speaker 2: Arguments.
>> Will Sentance: Our arguments, and are all human first one is will, and its parameter which is assigned is?
>> Speaker 2: Name.
>> Will Sentance: Name, yeah, let's be really precise, it was because it's bit froze, people. I gave this to you last week, you know the small engineer, they were thrown a bit by what we're at to see, cuz I can see two names, in that line below.
[00:02:18]
We'll see why, in a second. Okay, name, excellent. And then the next parameter is?
>> Speaker 2: Score, value of three.
>> Will Sentance: Yeah. Don't anybody think that these are properties. These are just data variables, you know, labels, like any other. They're just ones, which we got to leave a placeholder for, early on, and then prefilled when we run the function, okay.
[00:02:35]
Now, we enter the body of the function. Braden, what do we do in line one?
>> Speaker 2: Declare constant new user, which is a new object.
>> Will Sentance: Fantastic, thank you, Braden. Okay, over to you, Kayla. Hold on [LAUGH], I always really struggle with that. Over to you, Kayla.
>> Speaker 3: We are setting the property name on the new user object-
[00:02:59]
>> Will Sentance: I love that.
>> Speaker 3: To the value of the argument name.
>> Will Sentance: That's excellent, that's spot-on. Now, that's really important there, because it is a bit odd that we are saying, go look for new user, and kind of implying that there is a name property on it, or if there isn't create it now within the object.
[00:03:18]
This is not a variable, right? This is not a label, this is not an identifier. This is a property on the object, new user. Exactly as Kayla said, create it, and assign to it whatever, so into the right-hand side of the equals, whatever is on the right hand-side there, go look for that in memory.
[00:03:36]
It will add the string will, and we stored in the name properly. Exactly as Kayla said. Let's do it again, Kayla, if you mind, what's the next line say to do?
>> Speaker 3: We set the property score on the new user object to the value of score, which is 2.
[00:03:55]
>> Will Sentance: Yeah, our argument, exactly. The parameter score is what the argument value, 3, stored in there. Dan, final piece here, what are we doing?
>> Speaker 2: We are creating a increment function-
>> Will Sentance: Yep.
>> Speaker 2: On new user-
>> Will Sentance: Yeah, exactly.
>> Speaker 2: And saying that-
>> Will Sentance: There it is, saving all its code, saving all its code, think about saving all its code.
[00:04:19]
But I want that, because I wanna be able to do new user, well, within a second. There it is, I've a beautiful object. It's got everything I need. But, Jeff, it's stuck inside the execution context of user creator. What do I need to do to get it out, into user one?
[00:04:34]
I return it, exactly right, return it out. And know that this whole portion here actually evaluates, turns into this return that object, and store that unusual. So there we go, there it is, the user one object, and look at that, people, it's exactly the same as our previous set up.
[00:05:02]
>> Will Sentance: There it is, and now we have our beautiful function there. I want to say one little thing, that I don't, die. We'll come to the second. Let's go back to global as we are, and hit our next line, declaring user 2. I'm gonna do this one here, even though it seems repetitive, cuz I want you to spot something that may be a little bit redundant, or very redundant, or.
[00:05:30]
Fundamentally, and word fundamentally, and, nevermind, fundamentally redundant. We're gonna run user creator one more time, we're gonna create a new execution context, this Tommy Paulson, Tim, and five. My friend is my friend from, from school. Very good friends. I don't know why, I should have changed these names long ago.
[00:06:01]
I thought I think in the OP version of all, but I did change the names, I do not know why long ago, four years ago, I put it as Tim, my friend, my only friend from grad school. Actually, I wanna get it on the record, I have many, no, no, [LAUGH] even him, I'm not sure he considers me a friend.
[00:06:20]
All right, anyway, I think he considers me a colleague. Okay, so in this execution context we go
>> Will Sentance: I'll keep it small, for now. And in the local memory,
>> Will Sentance: We're gonna have, I don't know why I made it this small, but here we go. Name, Tim, score, five.
[00:06:46]
We then create an object, new user. This is really bad, I don't know why I made this so small. An object, new user with a name property, save that to the value of the name parameter, whose argument was two. Score, five, why did I make it so small?
[00:07:08]
I do not know. And, increment, save a brand new function, all of its code. So I know that on that object, when it gets returned out into user two, it's gonna have a beautiful, it's gonna have a beautiful increment method on it. There it is, name, Tim, score, five, and increment, is a function, and now we do our all important check.
[00:07:53]
Can we do, user 2, dot, or any of them, but that's the user2.increment. Todd, over to you, look up time, user 2, where is it?
>> Speaker 2: In global memory.
>> Will Sentance: Global memory, we have it.
>> Speaker 2: Yes.
>> Will Sentance: Yes, it is. Increment, is it a property, is it a method on user 2?
[00:08:12]
>> Speaker 2: Yes.
>> Will Sentance: Yes, it is, we grab it. I'm not gonna execute it right now. But just think about what increments code says. It says, new user dot score++, but I'm pretty sure there's no new user out here. And we lost that. Unless the function increment that was stored in here had a [CROSSTALK] backpack, which was a link to the name, the old name for the same function, meaning if I run, as a very little brief bonus, and, people, don't worry about this, if you go, when I run increment you, because we're not going to use this style.
[00:08:44]
We're never gonna use this style, so we don't need to dwell on it. But just notice how closure is everywhere, the object gets returned out, the increment function inside of it says newUser.score++. Where's newUser? This execution context, let's be clear, has been deleted. Both have been deleted, but, because the object, when it returned out had a function on it, that function was linked to all the surrounding memory including the new user, which was a label for the very same object.
[00:09:18]
I mean we get the new user label still inside of increment, and it will refer to user2. The backpack is everywhere. I just wanna give that a little bonus, because we saw the backpack in this session, but don't worry about it. Because we're never going to use this approach.
[00:09:35]
But this approach fundamentally has worked, easy to reason about? You bet it is. I've got my function right there, to the right-hand side of my dot, I can literally have it Google Search pre-filled, user two dot, it's gonna fill in. If I had other functions stored on there, they'd all be there, I could start writing, and they're literally gonna show up.
[00:09:55]
That's the design of the code editor of your choice, but it speaks to the fact that those functions are absolutely, literally on the object. Available. Beautiful, wonderful. Are we done? We're done. Easy to reason about, no hunting with functions, no thinking this function actually applies to my quiz user.
[00:10:17]
My quiz question 17, because it's on this object, and yet this approach is completely unusable, because I said there were two other goals, and my paradigm, what I say, they were? Easy to add features to new, new functionality, and nevertheless, officially before when, people, tell me what, with this style, is fundamentally wrong, that I could never use this, Dan, go ahead.
[00:10:47]
>> Speaker 2: We're storing the same function twice.
>> Will Sentance: He's spot on. There's no getting away from it, that this data we can't. We can't, you know, not store T and five, Will and three, that's different data. So I got a story again, it's different, but the code of this function, and the code of this function, is identical, and if I've got 500 users who need to have the increment function, so that we can do us a 703.increment, I say five of us, and use it 495.increment.
[00:11:17]
I gotta have a copy of it, right? And if either way, I just got one function, I have 100, 200, three, four, five, literally hundreds. Are they all gonna be called, I'm gonna have copies of each of them, each of them maybe 10 lines of code. I've got 1000 users, as 10,000.
[00:11:33]
And then each function is 100. I'm wasting 10s of thousands of lines, of codes here. So, space in memory will also add. Also another thing that's a pain in the ass about this, perhaps, or problematic about this, yeah, Peter.
>> Speaker 2: If you wanted to add a feature to this, you'd have to add it to each user.
[00:11:52]
>> Will Sentance: Perfect, exactly as I say. Yeah, spot on, we would have to add the function manually if we wanted to add a feature, which is new functionality. Manually add it to every single object.
>> Will Sentance: But I will say this, super intuitive. There is no mystery, of course I can use the increment function user2, it's right there on the object.
[00:12:17]
Generate objects using a function problems, every time we create a new user, we make space in that computer's memory, for our data functions. But that function are just copies of the same code. Is there a better way? We'll see.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops