7.4: The Constructor Function in JavaScript - p5.js Tutorial

This video is about the constructor function in javascript. tricky and confusing topic it relates to how you generate objects and it's a different style than what Ishowed you in the previous video with a literal object being made into an array and in fact it's probably and I hate to use this term is slightly better style more flexible style will afford you some possibilities and get past some limitations that are here so let's first talk about why do we need this other step we're going to talk about what that other step is the constructor function so there's a couple reasons so this example first of all it has an array at empty array and setup it puts four objects into the array there are those objects and then in draw it calls function on those objects display the objects move the objects. So where does this breakdown? There's a couple ways this breakdown number one is it's a lot of code here and set up this is a simple object just has an XY and two functions but you could imagine you could have an object with 10 properties 15 properties five functions six functions you don't really want like all this code inside of this loop and setup it's sort of hard to manage to keep track of the number one to be nice if we could move this some where else to kind of if you're thinking like I know I could move into another function that's basically what we're going to do to move into a special kind of function called a constructor function. the other reason why you might need a constructor function is you might want to make new objects in different places in your code so you might want to start this programme with four objects and then every time you click the mouse you get a new object and so you need the literal object it set up when you make four and then you also need that in mouse press when you make another one so you suddenly this code that the whole point of it was to not have to write it again because inside a loop what if you need to do it later somewhere else in the code if you have the constructor function that constructor function is reusable so the purpose of the constructor function is a special function to make the object for you so it's really like this is making the object but i want to put that somewhere else. Essentially what you're going to just reorganizing the code and some new possibilities will open up so let's look at, before I even get to that let's look at what that does to the code. So pretend that this all this code didn't need to be here and in fact I'm going to like hit a lot of carriage returns go far down here and leave it down here I'm gonna comment it out so that it's not affecting anything and come back up here and if you if I had a constructor function I would be able to say something like this: new bubble this is new syntax with the keyword knew what the keyword knew it means is a JavaScript make a new object. What kind of object? This bubble object. How do I know what a bubble object is? I'm going to write a special function called bubbles somewhere else somewhere else that will explain what an object is generated make it put it here so that it goes into the array. So and what's wonderful about this is this beautiful lovely clean sort of like succinct syntax like all of the code for the object is now somewhere else. We can see that the main program is just let's start with an empty array let's put a bunch of things in it and let's make those things move around the screen and do stuff. And so, with this all that's left to do is define what it is to be that bubble object to write this constructor function that makes that bubble object. So how do you do that? That's the next piece I want to come over here to the whiteboard and oops hit my button again Oh come on button. There I am. Going to come over here and talk about that the syntax for that so what I think of what a good way of looking at it is okay so we know how to write a literal object a literal object i'm going to kind of squeeze over here and have some mixture room I'm to have some extra room. I'm just going to say VAR B off a literal object is a collection of name-value pairs properties have a property named X with the value of 100 have a property name why with a value with 50 a property name display and the value of this property oh it happens to be a function and what do I do in that function? I draw an ellipse I set a color and if I want to refer back to a property of the object remember I have to say this another property have to say this . x so this is the syntax that you're familiar with if you watched the previous videos it's what I've used so far so. Then draw sort of magical line here and what I want to do is look at this like a thing poking me. I don't have a lot it looks like this big space here very cramped, camera lights, thing poking me. Um, so uh, so over here what I want to do now is look at how do I make this with the constructor function so the constructor function is a function just like any other function in JavaScript so this syntax in a weird sort of way almost goes back to something that you might be a little more used to but with some kind of strange other nuanced and aspects to it. So to define a function in JavaScript simply write function, the name of that function, leave that blank for a second, if there are any arguments or parameters parameters that function in parentheses and open curly bracket can you see that yes and a closed curly bracket so a constructor function is a function just like any other function however we intend to use this function in a special case by invoking the new operator so i want to say new bubble mean I want to execute a function called bubble with the new operator to make a new object. So a convention in how you name the constructor functions is to name it with a capital letter. ok so so this is a function named bubble I've named it with a capital letter simply to note in my code that this is a special functions that constructor function. The thing that javascript is looking for is that new operator the thing that I have over here. It's going to invoke that constructor function say hey constructor function make a new object and just convention wise so I can keep track of what's doing what my code i'm going to capitalize that a name that would be bubble capital B. I think this video earlier and had no sound in it and I really explain that much better the previous video no one will ever see. I'm gonna keep going something else I'm gonna do this video is gonna be better i'm sure ok so now once this function is triggered with the new operator javascript says okay I'm going to make a new object. Now, the first thing to do is say what properties go into that new object? This is where the keyword this comes in again if I say this this . x equals 100 what I've done is the new bubble object that this constructor has made attach the property x to this bubble object so in the same way that we added a property here saying x colon 100 the constructor function is making a new object and attaching x 2 that particular object this object so I can then also attach a Y to it and I could also goes the camera I can also attach a function to it. And i know this I'm gonna go off the screen here but you so actually let me, it's not a screen it's a whiteboard, but let me actually write this little smaller so you can see it this . display equals function so you can see now Oh technical fail but I just going to keep going here this is already my second try um look at that by the way that's the thing this is the thing that was poking me just turn ok so you can see how this maps this is making a literal object make this object be with an X with Y with a display this is in a way like a template. It's a the object doesn't exist yet but if you were to call this function with a named bubble that an object will be created with these properties. X will be attached to that object Y will be attached to the object display will be attached that object so literal object it exists template idea of an object way of generating the object when you say new bubble the object is made and you might think that at the end here you would want to say something like return this so once the object is made you wanted then send it back to where you wanted to make right here I set of the host the camera I'm gonna have to remake this video again tomorrow I might do here I said new bubble I want this to evaluate to that new object the new object here the reference that new object is the keyword this but the thing about a constructor function is this is like what you don't have to say this its inherent to how once you invoke the new operator that that object will returns kind of unspoken. It's, you don't have to say it happens automatically for you. So this is the syntax one of the things you might practice right and exercise that will give you at the end is take something that you made in a literal object and try to convert it to this constructor functions to text this is a really hard confusing thing to explain and possibly understand hopefully i'm doing a slightly okay job. So let's do that now in the code itself. Remember down here before I throw left my code. I had for the literal object commented out so now I can actually write that constructor function so I'm gonna say function bubble. And now what are the properties? I had an X and a Y so I need to say this . x equals random 0 to width with this . y equals random 0 to height so you can see instead of the literal syntax I'm actually setting properties attached to this equal to the value that sort of more like code being executed line by line and then I can add the display function and I can add the move function and I left a space here and then the nice thing is I can go and grab these lines not these haven't changed those functions are exactly the same and i know im doing this kind of quickly like if you're following along you can pause the video and try to sort of do this yourself I'm i will upload the summer and try to put them in the description on YouTube or Vimeo wherever you're watching this but you can see now let me put a line break here you can see now this is the constructor function this is a function whose sole purpose in life is to generate an object when you say new bubble that object is made it's stored in the value of this X gets attached why gets attached to it just like its attachment move gets attached to an unspoken at the end that object this object is returned where where did I say new bubble up here what do I do with it I put it in the array boom boom I don't know there's a bubble pops but so this function new bubble now notice interestingly enough and I hate to do this to you but if I said this this would not work right the constructor function is a function like any other it will be executed but all sorts of things will break and not work this only works with javascript is looking for that keyword new in order to know to make this a new bubble object and and attach the properties to it so i put this in here and i run it we've got four and again I've got the same magical thing as any and you know make 400 people so I'm running out of steam here so hopefully this so this you know right now all I did in this particular example was take take the literal object that I had in this loop up here and move it to a constructor function so in the next video what I would like to do is kind of show you what sort of what what what you could really do with this because now if I have this constructor function I could say when I click the mouse also make a new bubble and how do I add this to the array right so this is what we need to look at I don't have to rewrite that inspect constructor function can be reused anywhere in the code so this will work yet this is the topic that I want to look at in the next video and how do I maybe assign parameters to arguments to it I want to make an object at this location at mouse X at my mouse Y that's the topic I want to look at the next video. For now I would say, if you want an exercise for yourself go and find something maybe watch the previous video I made you a little a literal object in a loop take that literal object code out of the loop right the constructor function see if you can get to perform exactly the same way. OK, so this is the end of this particular video. In the next one I'll look at a func., of an array function called push an array function called splice which allows you to add things to an array and remove things from an array so we can have a much more flexible system. ok, and i'm going to hit stop now.

Channel: The Coding Train

Views: 91,283

Keywords: constructor function in javascript, javascript constructor functions, what is a constructor javascript, javascript constructor function, constructor function javascript, constructor functions in javascript, constructor javascript, constructor functions, constructor function, function constructors, javascript constructor, javascript constructors, Programming Language (Software Genre), objects, javascript, p5.js, arrays, constructor, JavaScript (Programming Language), tutorial, function

Id: F3GeM_KrGjI

Length: 12min 38sec (758 seconds)

Published: Fri Oct 02 2015