5.3 Contructor Function

In this video, you're going to learn about another model for creating objects. So this is the constructor function, so just like the factory function, we're going to create a function, and the job of that function is to construct or create an object. However, the naming convention that we use for constructor functions is different. So, this convention that we have for factory functions is what we call camel=>camelcase notation, so the first letter of the first word is lowercase, but the first letter of each word after that is uppercase. So it looks like this, , camelCase And these uppercase letters look like camel humps, so we call it camel notaton. On the other hand, we have another notation called Pascalcase notation, and in this notation, the first letter of each word must be capitalized. So, PascalCase. Now, when we name constructor functions, we must use Pascal notation by convention because this is something that other JavaScript developers expect when they read your code. So we're going to call this function Circle with a capital C. Note that I didn't call this function createCircle and you'll see that in a few moments. Now, just like our factory function, here we need to add a parameter: radius However, instead of returning an object, we will use a different approach to initialize an object. In JavaScript, we have a keyword called "This". And this is a reference to the object that executes this piece of code. You'll see this in a moment. For now, just imagine that this refers to an empty object. With dot notation, we can access the properties of an object, we can read a property, or we can set a property, so on this new empty object, we want to add a property called radius so radius, and we set it to this radius argument that you get here. So in JavaScript, our objects are dynamic. Once we create them, we can always add additional properties or methods to them. So here we are adding a new property to an empty object. Similarly, we'll use this approach to add a draw method to this new empty object. So we're doing a this point draw, but we're defining that on a function and in the body of that function, we're just doing a console.log of draw. Finally, to create a circle object using the constructor function, we're going to define a constant called circle and here we're going to use another keyword, which is new circle, and pass 1 as the radius. What's going on here? Well, when we use this new operator here, 3 things happen. This new operator creates an empty JavaScript object. So something like this. Constant of x, set to an empty object. Then it will define this to point to this new empty object. So in this code, we have access to this empty object, and we set this radius property when we let the draw method into this new object. Finally, this new operator will return this new object from this function, so like this. Return this; So let me recap, when we use the new operator, 3 things happen, this operator first creates an empty object, then it will set it to point to this object and finally it will return this object from this function. So what we get here is this new object, and we just define the circle to point to that object. Now let's see the difference between factory functions and constructor. Although with factory functions, we create an object like this. Constant theCircle here,we call createCircle and pass an argument. So, with factory functions, we simply call a function and in that function we return a new object. In contrast, with constructor functions, we used the new operator, and instead of returning an object, we use the this keyword. Also in terms of naming convention with the constructor functions, we use the PascalCase convention, but in the factory functions, we use the camelCase notation. So you may be wondering which approach or model to use to create new objects. Both models are equally good for creating new objects, the constructor function model is familiar to developers who have some programming experience in languages like C # and Java. So, with this pattern, you can see that we are creating a new circle. If you don't have any experience in languages like C# or Java, you might want to go for a factory function. That's it for this video on constructor functions in JS, we'll see you in a brand new video.