A Tour of JavaScript & React Patterns

Prototype Pattern Solution

Lydia Hallie

Lydia Hallie

Lydia Hallie
A Tour of JavaScript & React Patterns

Check out a free preview of the full A Tour of JavaScript & React Patterns course

The "Prototype Pattern Solution" Lesson is part of the full, A Tour of JavaScript & React Patterns course featured in this preview video. Here's what you'd learn in this lesson:

Lydia codes the solution to the Prototype Pattern challenge.


Transcript from the "Prototype Pattern Solution" Lesson

>> All right, well, I think we'll start off with the solution for the prototype pattern exercise in that case. I'm just gonna open this again in stack blitz, I'm just gonna make the font size a bit bigger, I hope this was big enough. On the prototype pattern we of course, first have to create the constructor that contains all the unique elements.

And on this create user factory function you can see that the object that gets returned that first name, last name, full name and email are all unique. So when we create a new class or just do class user, the constructor, which again, takes all these arguments that we had before.

So then we have like this at first name, this first name, I see that I made a syntax error here. I make syntax errors everywhere, okay, this last name is last name. This email is email, and then we also have a unique full name, which is both of them combined.

So this step full name is, again, I'm just gonna copy-paste this, this our first name and this last name. Now, we also have these methods on here that are shared among all the users. So we don't wanna put that on the constructor but instead we wanna put that on the prototype.

So we can do that check last online, which logs this. Send email, Which logs this. And then lastly we have to delete, Which is that. So now I can remove this function. And instead of calling create user, I can just do a new user, a new user. So now when we log, I'm just going to log user and user to first, I will show that other thing later.

Let's see if this is all implemented, right? Yeah, okay, so now we've got two users. Now, one thing you may notice or that's actually pretty fun is that when we log, both the delete methods are like methods that are available in both of these objects prototypes, or we can check if they're strictly equal.

So if we go to node.js, you can see that it's true. Okay, now let me go back a bit. So here, I'm just going to fork this again, so this should be a new one, fork. If we were to do that on the factory function approach and we checked if they were strictly equal, it's false because we are creating new functions in memory every time.

So the reference to that delete method is like it refers to a different place in memory. But on the prototype pattern because it's using the same prototype, so it's actually all referring to the same one it's true. So here you can, like clearly see okay, we've just actually created one delete method instead of two whatever for what the prototype pattern.

So this is where the whole memory efficiency thing comes in, which is pretty cool. So yeah, this is all we have to do to create the prototype pattern for the users.

Learn Straight from the Experts Who Shape the Modern Web

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