JavaScript Question: When Should I use the Prototype?

I received a question recently asking when should you use a prototype there's a pretty solid rule that would call for the use of a prototype object and we're going to discuss that in this tutorial welcome to another tutorial from all things JavaScript where we help bridge the gap between novice and expert to be notified about new tutorials make sure to click that Bell button and subscribe also check out the discount links to all my courses that I've included in the description of this tutorial now the basic rule for the use of prototype is if you plan to have more than one object that will share a method you should place that method or methods on a prototype of those objects that's the general rule now there are a few reasons you should do this so let's first look at those reasons and then we will look at an example to help illustrate that now if you're unfamiliar with prototypes or how to set a prototype of an object I will link to several tutorials in the description basically a playlist that goes through the prototypes and I would recommend you view that first now on to the reasons reason number one and it's the whole concept of dry coding which stands for don't repeat yourself so if you have a method you're going to share across objects what you want it in one place by putting it on the prototype object it is in one place so you're not repeating that method across multiple objects another reason by placing these on a single prototype object you have one single object that you're able to manipulate and that can affect multiple instances now obviously this is something you have to be careful of but it does give you the ability to make a change and effect several objects at once and so that can be a really nice feature finally by placing those on a single object instead of on all of the individual instances you are reducing memory requirements you don't have to have that method on multiple objects and it helps with memory requirements so those are some of the reasons to use a prototype no let's look at an example that would illustrate some of these things now here I've set up some code I have an object that I've created and I'm going to use this object as the prototype and inside of this I simply have one method full name basically what it does it takes the first name and concatenate that with the last name and returns it so this method I want available on any user object so I create an object every time I get a new user just to keep track of information about that user so here's an example where the first user is created and then I attach the name first name and last name to that user object and because I created the object with this is the prototype it has access to that method and we can see that easily by jumping to the console and just taking a look at user one here we have the data that's on the object now if we open this up and then open up the prototype we can see here is the method the full name method and so that is available for that user user 1 dot full name and it returns the first and last name concatenated together all right now let's add a second user there so we're going to do user to let me just copy this instead of typing at all and then I'll change the name here Simon to Smith and change this to user too so now we have two users and they both share that method if we open up this second user we can see that it also has access to that method so the method exists on one prototype object I don't have to place it on each of the individual objects now it doesn't matter how we choose to use a prototype with an object here I've used object create to create my objects and assign the prototype that's only one method of doing it in JavaScript it doesn't matter if we use a different method the end result is the same we're still sharing those methods that are on the object prototype let me put a couple of other methods for doing that exact same thing so we'll use the constructor method and also the class structure I'm just going to paste this in so you don't have to see me copy it so here's the constructor method I set up a function here that becomes a constructor function and it assigns the first name and last name I sign the prototype and then I assign the constructor to the prototype something that's a good idea to do and then I go ahead and create a user user 3 and I do a new user now what this does is once again this becomes the prototype obj proto now the class structure is a bit different we don't create the object that's used as a prototype basically this will create a prototype for us and place this on the prototype and then I use the class structure to create user 4 so let's just go ahead and look at those and see that we can see the methods on the product so I'm going to refresh and then let's look at user three first and if I open that up there's the prototype here's the full name method now if I take a look at user four open that up down here on the prototype ah here's the phony method as well so that's a sign to the prototype object so the class structure is really just a different syntax to accomplish prototypal inheritance which is the basis of JavaScript so in the end we're placing things on the prototype now one more thing I want to show you here so three of these users users 1 2 & 3 are using the exact same prototype object user 4 is not because it was created from the class structure if I created additional user from the class structure they would use the same prototype object but user 1 2 & 3 already are so let's go ahead and change that prototype object I'm going to do obj proto which is the name of the object dot F name and this is going to be a new method and basically what this new method will do is just return the first name there we go so I press return on that now if we do user 1 dot first-name I've got to use the right function name F name not first name there we go and it returns the first name user - dot F name and user 3 so by making that one change to the program prototype object I made a function available for all the objects that have been created or that inherited from that prototype object so we see the value of being able to edit that prototype object although you do need to be careful with that that can be a very nice feature so some of the reasons to use a prototype and remember if you have methods that are going to be shared across objects places on the prototype that's the general rule now before we're done here please hit the like button and subscribe and remember I've provided discount links to all my courses in the description section if you would like to become a patron in this channel I would appreciate the support for a certain level of support you can get access to the code files I use you can also contribute by visiting my website if you prefer to help that way you can follow a link for both in the description click the bell button to be notified about new releases I release a new tutorial each week and once again thanks for watching

Channel: All Things JavaScript, LLC

Views: 3,563

Rating: 4.9589744 out of 5

Keywords: JavaScript, Learning, Tutorial, All Things JavaScript, Getting Started, instruction, training, prototype, When should I use prototype, DRY, prototypal inheritance, javascript question

Id: iYCT1dY42d8

Length: 9min 55sec (595 seconds)

Published: Thu Oct 10 2019