JavaScript Constructor Functions

in this lecture you're going to learn about another pattern for creating objects that is a constructor function so just like the factory function we're going to create a function and the job of this function is to construct or create an object however the naming convention we use for constructor functions is different so the naming convention we have for factory functions is what we call camel notation so the first letter of the first word is lowercase but the first letter of every word after is uppercase this is what we call camel notation so it looks like this camel notation we've got one two three four you can see the first letter of the first word is lowercase and these uppercase letters look like camel humps that's why we call it camel notation in contrast we have another notation that is called Pascal notation and in this notation the first letter of every word should be uppercase so one two three four you can see the pattern right now when naming constructor functions we should use Haskell notation by convention because that's 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 did not call this create circle and you will see that in a second now just like our factory function here we need to add a parameter radius however instead of returning an object we're going to 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 is executing this piece of code you're gonna see that in a second for now just imagine this references an empty object now you know that with dot notation we can access properties of an object we can read a property or we can set a property so on this new empty object you want to add a property called radius and we said that to this radius argument that we receive 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 as similarly we're gonna use this approach to add a draw method to this new empty object so this draw but we set this to a function and in the body of this function we simply do a console dot log of draw now finally in order to create a circle object using this constructor function we're going to define a constant called circle and here we're gonna use another keyword that is new circle and pass one as the radius what is happening here well when we use this new operator here three things happen this new operator creates an empty JavaScript object something like this Const an X set to an empty object that is happening under the hood but you don't see that next it will set this to point for this new empty object so in this code you have access to this new empty object and we said this radius property as well as the draw method in this new object finally this new operator will return this new object from this function so it looks like this return this we don't have to explicitly add this statement here in this function this will happen under the hood so let me recap when we use the new operator three things happen this operator first creates an empty object then it will set this to point to this object and finally it will return that object from this function so what we get here is that new object and we simply set circle to point to that object now let's see the difference between factory and constructor functions so with Factory functions we create an object like this constant my circle here recall create circle and pass an argument so with factory functions we simply call a function and in this function with return a new object in contrast with constructor functions we use the new operator and instead of returning an object we use that this keyword also in terms of naming convention with constructor functions we use the pascal naming convention but in factory functions we use the camel notation so you might be asking which approach or which pattern you should use to create new objects both these patterns are equally good for creating new objects the constructor function pattern is familiar to developers who have some experience programming and languages like C sharp or Java so with this pattern you can see we're creating a new circle now if you don't have any experience in languages like C sharp or Java you might want to go for a factory function there's really no difference between these two patterns however there are some discussions online by some strongly opinionated developers comparing these two patterns my suggestion to you is do not get hung up on these discussions they're just a waste of time pick one pattern and just stick to that hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you're an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come up in technical programming interviews so if you're pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this course with a discount using the link in the video description click the link to find out more about the course and enroll

Channel: Programming with Mosh

Views: 244,438

Keywords: Javascript, web development, web developer, front end, front-end, back-end, back end, mobile development, mobile developer, es6, learn javascript, javascript programming, programming, constructor, constructor function, object, programming with mosh, code with mosh

Id: 23AOrSN-wmI

Length: 6min 46sec (406 seconds)

Published: Tue May 15 2018