Hello, and welcome to techsith tutorials. Today, We are going to learn about constructors in JavaScript. This is a very first tutorial in a much larger series on Object-Oriented Javascript. A lot of you have asked me questions from prototyping Inheritance mix-ins , A lot of you asked me when I will release the tutorials on classes? So, I thought instead of just releasing tutorial on "classes", I should create a this comprehensive series that explains you from the beginning to the end. I did lots of research on this and Created this wonderful tutorial series, and I'll try to release Maybe once or twice a week so that you can get your learning going. In order to understand overall object-Oriented Javascript I think constructor is the best place to start because that's how you create objects the ultimate objective of Object-Oriented programming is to create objects with ease. In programming languages like Java you have classes and classes have Constructors which basically help you set the initial property of the object you create, but in Javascript you can create Constructors directly. Initially they where no classes, and even though they have introduced the class Keyword, Inside they are using constructors, that is why I wanted to start with constructors so understanding constructor would help you Understand classes. You can create constructor using just regular Functions and there a special way to do it, so let's look at the difference between a regular functions and constructors So here in this example. I have a regular function "add" which takes two numbers does some calculations and returns the result. Functions usually is to do specific things And it would not always return something sometimes it set something to something but Usually it would return something and you can call it simply by putting parentheses, around. let's write a constructor now to see the difference, so let's say, if I create a Car constructor, I'm going to start with the name "Car" and it looks like a normal function it will have color as a parameter and inside Instead of doing some calculation, I will set "this.color = color" Remember, I told you that the job of a constructor is to set the initial properties of the object That it creates. So here, actually when I say "this.color" Basically it's setting the property for the new the object that you will create from this constructor now calling the constructor is little different than regular function, so I would say "let redCar" this is the object it creates and you can ay the "New" Keyword, and then call the car constructor, and I'll pass the color red so this will basically create a redCar by setting the color property red to it, Compared to the regular function. This has a "new" keyword in front of the Constructor also you'll notice that When I build a regular function. I'm just to lower casing the name But constructor, I would prefer to you to have First letter capital so you can differentiate between a regular function and a constructor It won't hurt if you don't do it, but it's a good practice so you can recognize it all right? So let's look at this New object we just created so if I run this I Would see the object that I create here it would basically say a car and then inside it would say color Equal to red now if I expand this a little bit I would see proto here its "__proto__" Now it is very important to understand this concept because Object Oriented JavaScript is all about prototype inheritance and This right here is the most important thing to understand What this is it's a creator of this object so think of "__proto__" is a creator of this red car How did you create this creator? We'll look at this in a detail But when you when you call the constructor using the "new" Keyword it basically sets the property that you need to set inside the constructor and then it would Have a reference to its creator here, and if you expand this here you would see the constructor as a part of the creator So constructor is not the creator, but it's part of the creator Now let's say if I want to create a blue car I Can simply do this I can say? new car equal to Live and this to object red continent new car are going to going to be completely different however, they would have a same reference to the constructor which is This car constructor now. What if I don't use the New Keyword? what would happen so let's look at it because a lot of people make this mistake, and they pay the price, so let's say if I call this constructor without a new keyword, I will get undefined and The reason I get undefined is when I call it without a new keyword it looks at this as a regular function and And you can see that. It's nothing in return here, so when there is nothing that you turn Function returns undefined that's why you are getting undefined ok now. What happened to the distant color in this context this really means the The global object which is window. So what it did is it added a new property to the global? Object which is window. We can see it here if I do Window dot Color run this I would get red so window does have a new property which is red since I never intended to create it It's kind of a problem because you don't want to create Properties into global space so to avoid that there are two ways to do it first you can just simply use use strict When you do this you won't be able to call constructor without a New Keyword so let's say if I do this It would give me an error saying cannot set a property color off on behind which is good however It could be confusing so I won't have a write error. So what I can do here is Inside the constructor I can add a line here an if statement I can say if new dot Target if it's not the new Target, then you can throw call So basically checks if if I call it the new or not, and if the target is not new then it knows that You haven't called it with new enter the toilet error. So now if I run this I Would get that error car must be calling me in Javascript when you create properties these constructors They are all public properties which means you can directly access the property using dot So you can say red car dot Color this should give you The color red, So I run it I would get Rid The or if it doesn't have a concept of private properties however you can create one using closures and The way to do it is so instead of this disk taut color What I would do is I would have a setter in the Gator So I would say this dot Set color equal to function color argument anyway, they would have a inner variable called color and they would set this color to the color and Similarly you can have a getter so I can say this dot Get color equal to function And since it's just returning color Now since there is no this dot property named Car doesn't have that property it just have a inner variable that it only Can be accessed using these methods? because of the closures I Have a tutorial on the closure if you want to look at it If you don't know, what tools are sorry, so now when I create a red car And if I just try to access red car dot color that's your underscore color It would not give me that They will say undefined so I really have to call that car dot Get color and now it would give me the color red Now that we have the properties in the constructors, what about the methods? So the best way to set the methods for this object are not directly inside the Constructor, just like we did this dot color instead. You should use Its prototype to set the property so in next tutorial We are going to learn how to prototype works at the end of the tutorial. I'll provide a link so you can follow it and Please make sure that you bookmark the playlist or this tutorial so you can follow the entire series And I hope you learned something with the tutorial and if you did please like subscribe and provide a constructive code. Thank you you
