JavaScript Constructor Functions
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
what about the getter and setter ? Can that be used in factory functions? Or is that only possible with Constructor Functions ?
❤👍
do any of you guys understand how const x is related to anything else in this? if it were const x = new Circle(1) I could understand how its related. but x is being initialized as an empty object. so hows it related to Circle? or are constructor functions global where any other objects or functions created in the same file/document are automatically associated with the constructor function?
Thanks Jhonny
i dont undestand how can I make a circle with this code
I do not understand how I can use this I am to stupid
what happens if I write: const circle = Circle(1); without the new operator??
pelado del bien te quiero mucho <3
I feel as though i learned something. but i have no experience in java or C++ and it sounds like AI and Machine learning.
I think it's important to be familiar with both ways since you'll be reading others' code and be lost if they use constructor functions but you only know factory functions
Great lecture
"Do not get hung up on these developers' strong opinions. They are just a waste of time." 🤣 I love this guy.
great video, still a bit confused by this topic. So I think its more just practicing and playing around with constructive functions to understand this.
Thank you
Hi mosh do we really have to instantiate a factory function? I always run this function directly specialy weh setting an element: Example: createCircle(1);
Thank you Mosh, this was really good explaned
Instead of x you could explicitly use let this = {}, that is essentially what happens in the first line of the constructor function. Helped me to learn it that way.
i found out that if i write the same constructor function for Circle with ES6 it doesn't work. i tried writing it like this:
"
var Circle=(radius)=>{
this.radius=radius
this.draw = function (){
console.log("drawing for radius:",radius)
}
}
"
an then i got an error saying "Uncaught TypeError: Circle is not a constructor"
any clues?
He: constructors are for developers who worked in c# or java ;
Me completely clueless even when coded in c# unity before;
dying in ashes
The knowledge you gives is tremendous. It helped me in project and I am satisfied by your
video. Guys, Please give me a like for his amazing video.
Mosh, you the goat.
You should know all the ways of creating objects in JS :
-Object Literals
-Object.create()
-Factory function
-Constructor function
-Class
Why ? Because in certain situation one tool is better than the other !
Isn't that creation of object prototype rather then declaring function via constructor? Got bit confused thus my question.
FINALLYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY, BEST EXPLANATION EVER.
May I ask what is your VScode theme ?
Why using constructor function Circle without putting draw method into Circle.prototype?
Wow so useful!
Enigmatic!!
The moment you realize – the Factory function itself using Constructor function under hood:
function createCircle() {
return new Object()
;
}
m not getting anythingsssssssss…..
i am dumb, been watching 6 min video for hours but still can't get this 🙁
It’s great! Thanks
I fucking hate javascript
Can someone explain me why the constructor function returns: Circle { radius: 1, draw: {…} }
but the factory function returns just: { radius: 1, draw: f draw {…} }
tested with playcode.io by console-loging the myCircle & circle variables
dude is godlike
hi, my name is zinedine is there any way to put it in spanish for latin america
Simple and Superb!
20% of the video is Camel vs Pascal
Crystal clear explanation. Thank you, sir!
Hi Mosh, as a new programmer I would like to suggest you include some context for the use of constructor function. I.E. What are they used for?
wonderful explination!
this code does not even work you didnt even log it all you do is talk about factoRy FuNCtioNs And ConsTrUCtoR FUCNTIONS im HERE FOR CONSTRUCTOR FUNCTIONS IDC ABOUT FACTORY AND YOU DIDNT EVNE LLOOUT TWNHKLNAKLFWAN
excellent
I don't understand the this.draw function in his constructor function. It just prints the word ‘draw’? Am I missing something?
When he says : "What Is Happening Here"
Me like : I don't know either 🙁
Danke
The last bit of this video was extremely useful! THANK YOU
Earned a subscribe for not having a difficult accent and not having terrible sound quality.
Thanks for the wonderfull explanation 🙂
So, the memory usage on both ways is the same?