Guys, my name is dumb.

And today I want to talk about classes in Javascript.

So, basically, for those of you who haven't ever used classes before, a class is used to create one normal objects.

So you can think of an object as being a creation from a class definition.

So these classes are actually used directly by your program logic, but they used to create objects.

Now, these objects are the ones that actually used by your program to achieve different things.

So with that being said, you can define two main areas.

With that class definition, you can define what an object we'll have.

So this is called an instance property and also what they do.

This is called an instance method.

So with instance, properties taking into basically example off a human being a human might have a name and age and a hot so and instance, property describes the current state's off that object what they have.

It's basically just data about that property.

Sorry that objects.

So these instance properties are unique to every object which is created from that class definition.

So we now have the instance methods.

This is what they do.

So on instance, method for human being might be to talk, to run and to jump.

So this refers to what they actually do.

What actions on their behavior.

So typically an instance Method will use the instance properties to achieve their results.

So if those two men areas of rock there, So let's not create a class in Java script.

So Dan here we can create a class definition by using the class key.

Would let's talk about class luck that followed by the name off your class.

Let's create a class for a rectangle.

Let's talk about rectangle right there now, typically, but convention.

You want to use a capital letter at the beginning of your class name, So it's gonna be rectangle with a capital R, just like that, followed by to curly braces.

So now inside here this is your class definition, so every class also has what's called a constructor.

Now the constructor is basically just a method which is ran only once during the life off the objects.

So this constructor is ran once and it's ran when the object is being created.

So let's define this constructor, but helping I constructed like that, followed by two parentheses and your normal curly braces.

So the constructor is used to set up your object.

Okay, so this behaves like a normal method or normal function, which means if our top concert log inside here and then just say rectangle, he's being created.

Okay, so now this method constructor is ran when the object is being created.

So we have a class.

Let's now create an object from that class, the dead.

Here, let's create a new variable.

And we call this one something like my rectangle number one, which is an equal to a new object based off this class.

The stop that new.

That's the That's the new Kay would.

I didn't say rectangle just like that and then to parentheses to actually call that constructor method.

So it falls to hover over this.

We see we get constructor just like that.

So this will call the constructor method.

So now if I was to save these html foe and then refresh the Web browser in the console window, we get the rectangle is being created.

If I was to, um, make two of these rectangles, so my rectangle number two down here.

Saved these and refresh your browser one more time.

We get two messages off creation.

Okay, so that is how the constructive method actually works.

Okay?

The constructor is used to actually opposite Was it used to sit up the actual object.

So back to these instance properties.

What you might commonly see is the instance properties being defined inside the constructor.

So we have a rectangle now, a rectangle might have a week, a hot and also a color.

So let's to find these three instance properties within the constructor so below here.

Best to find a instance.

Property.

We can do these spots hopping out these dot and then the actual property name, for example, weeks is equal to and then develop you.

Let's just say it would be five Finnell.

We could do the same thing for the other two properties was like this and then dot quite equal to let's just say something like three and the color.

Let's make this a blue rectangle.

So this key word right there, that is a key word which refers to the current object.

So when I say this, I'm talking about the objects which is being created by that class.

Okay, so we now have our three instance properties defined inside the constructor.

So now if I was to save these and refresh your browser and in the console, if I just refer to the my rectangle objects or the variable here, Okay.

And press enter, we can see we get three properties.

There is color, height and width, which described the current rectangle.

Okay, so these properties are unique to this rectangle instance.

All right, so in most cases there, you actually to find instance, properties when you construct the object.

But these are typically user defined.

So usually you were topping my rectangle and then say something like three and in five.

And also maybe the colors that will say blue like that.

Okay, it's that blue.

So you want to make this 35 and Blue actually turned out to be the instance properties for this created object, Okay, this allows you to make custom rectangles with whatever values that you actually pass in.

So to achieve this result, you actually want to make the constructor function, except parameters for arguments.

So let's talk about underscore.

Yeah, and then say hearts.

Actually, that's terrible to say and then cuts and in public.

So these are now three parameters which are passed him through the constructor function and then days will be assigned to the instance properties off this particular rectangle object.

So let's stop here this week with days actually variables brought here.

So now we're assigning the width off distraction Good to be with heart and color and so on.

Okay, let's just make this a five and a three song out running This line of code right here creates a rectangle with that with the width off five hot off three at a color off blue.

So these are all passed in and inserted right there.

So now if I was to save this one and refresh the brother, we get the same result this just log out the actual rectangle object.

We got this rectangle with the five part of three on a color off blue.

So with this scenario, we can actually create two objects here to reptile was once again for the second time.

Let's give different data.

Let's say 10 and then rids.

So now, using this class definition but defining the structure off this rectangle.

But giving it custom values based on the individual needs off this August Current state in the program so else to save these sundry fresh brother this time.

What about rectangle Number one we get with 53 and blue number two we get 10 5 and writ so we can see how the instance properties are unique to the actual object being created.

We have two squares here with different instance properties for their done.

So that is actual instance properties and the constructive function.

Now for the instance methods, we can define these under the constructor.

So to work out, I believe the area off a rectangle, he multiplied the width and the heart so we can actually create a method which will give us the area off this rectangle or the example being created.

So let's define a new instance method.

We can do this, but topping out the name off the method, Let's say get area.

So get there right there.

That is the name of our instance method followed by the two parental season right there and then, um, the brackets.

So inside here, let's actually just return the width and the heart off this rec time.

So let's say return.

Return this dot with multiplied by this dot hot.

Okay, so now we should get different return values from this method based on the, um, the rectangle being used.

So forms that done here, let's say console dot above and then this a rectangle one gets area.

Okay, so using dot get area, This will call the instance method.

So for this rectangle right here, we should get five times three for the 2nd 1 Rectangle number two get area will give us 10 times five.

Let's save these and re fresh to Brussels, we get 15 and 50.

Okay, so you can see how these methods are defined in the actual class definition and their generic to the actual class.

And then they're using the instance properties that are defined by the constructor to give you different results based on the object being used.

Okay, now, one more example of the actual method.

Let's make a method that will actually print out a description off the actual object.

Let's say description Okay.

Inside here.

Let's just say Consul, don't look and then just say something like, um, on a rectangle, all in the missus put the the witness heart will say this stuff with And then, um this is hot.

Then we'll say and I am and then the actual color.

So now, by calling this Prince description method on rectangle we get I'm a rectangle off with Tom's heart and I am than the color.

So now down here, let's call the prince description method on the morrow rectangle inopportune.

Okay dot print be screwed Those to save and refresh this one we get the expected result rectangle off 10 times.

Father, I am ret.

Okay, so just to recap, we have a class which is a definition basically a structure off the eventual object being created.

We have an instance property, which refers to data that is relevant to each individual object being created.

And you also have an instance method which uses the instance properties to achieve an action or some sort of result.

Um, based on what's again each individual object being created from that class.

What and that is the basics off classes in Java script.

I want to talk about getters and set us in JavaScript classes.

So basically getters and sitters I used to define methods on a class which are then used as if their property.

So essentially, they looked like properties, but they're actually methods off that.

Plus, So let's see, with an example, just gonna define a classier in JavaScript.

And we call this one a squid.

Okay, for the constructive, Let's just taking a single argument here forward with.

And that'll be the wit on the hot off the actual square.

So inside he And let's just say this week is equal to that with parameter and the same thing for the heart.

Okay, so now the square has a cool with and hot.

Okay, now we have this basic square, So to work out the area off the square, you will be the heart multiplied by the width.

Okay.

So we can actually define a getter to achieve this.

So down here, let's create a getter for the area.

We can do this part, starting out gets just like that, then a space and then specify the name of your get up.

And this will be the actual name that you talked about as if it's a property.

So let's just say get and they put down area followed by parentheses.

Okay?

then the normal brackets there for the actual method body, sir.

Now inside here.

Um, this is now basically a function.

We can put any logical want inside that we could do anything.

So let's just return returned this week multiplied by these dot and that would give us the area off these square.

So you can see how it put a return statement inside this block because it literally behaves as if it's a method in case.

And now, um, we can we contest this together?

We can create an instance off this square.

So it's just go down here and say, We'll say, Let's make a new variable and say we call this one square one.

They go to a new square with a wit and heart off something like 25.

Okay, so now I'm down here.

That's just a concept of love.

And then we're gonna call this area, get up, but topping at square one and in dots area, they can see how it essentially behaves like property.

Okay, No.

So there's no need to put any any parentheses here, because yet it literally is properly right.

If I was to say this one and then re first brother.

Okay, we get 625 as a result.

So, um, 25 times 25 would be 6 24 Let's make that.

Maybe for just so I get a small number of square up for width and height saving very fresh, and we get 16.

So you can see how we're calling this area.

Get up running this dysfunction body, but behaves like it's a property.

I guess that's the actual get out right there.

So now let's actually create a setup.

So a sit up behaves basically in the same way.

Um, you can assign new values to your instance properties with a property like syntax.

So you can actually do this.

You can say square one dot area equals and then something like 25 for example.

So let's create this center.

So this right here, this line right there will actually convert this 25 into a width and heart for these two properties.

Okay, So back inside here, let's just create a Sarah full area, so we'll say sense and then put area.

Look, that this one is gonna take a single argument, and that will be this value right there.

So let's say sit area in parentheses.

Let's put down area.

Okay, so it's not here.

We can now simply just find these square roots off this 25.

Um, and then we can assign that that result to the Witham hot off the script because obviously the square root off the area would be the width and hot off the actual square.

So let's say this stuck quick is equal to the square.

So we used the math and dark s Q r T method and passing here.