class

[00:00:00]
>> Kyle: So if you can start to understand that prototype system a little bit and understand how that fits in with this keyword, now we can talk about the class keyword. The class keyword is layered on top of the prototype system and the class keyword gives us some syntax that looks a lot more like the class designs that we normally do in say, a C++ or Java.

[00:00:23]
So we wanna look at how we use the class keyword to do the same thing that we were just doing with that prototypal style, which quite frankly was a lot more awkward, there were a lot more moving pieces. I think you'll see that the class syntax is a lot more attractive.

[00:00:40]
>> Kyle: So to do the same outcome as what we had in the previous section, we can now define a thing called workshop as a class. We use class keyword, and then we make a thing called workshop. And then inside of that workshop, the curly braces from lines one through eight, define the class definition for workshop.

[00:01:01]
You'll notice that we define a constructor which is kind of the same thing as the workshop function in our previous slide. And then we add the ask method directly in. You'll notice there's no cluttering up of saying workshop.prototype.ask =, we don't have to do any of that. Because this syntactic sugar says, I know that you wanna make an ask method that belongs to workshop.

[00:01:24]
It's important to note that under the covers, JavaScript is doing the same thing as what we did in that previous slide. It's making a prototype object and making a function. And when we call new workshop on line 10, the same mechanism is happening. We're making a deepJS object that does not have an ask method, but that object is linked to the prototype object of the workshop class that does have the ask method.

[00:01:50]
That's why on line 13, when we say deepJS.ask, we are prototype delegating the workshop definition, AKA the workshop prototype. So the same mechanism is involved, it's just a much cleaner syntax now. And by arming ourselves with this syntax, we now fully are capable of designing class-orientated JavaScript programs.

[00:02:13]
And this is extremely common, you'll see this in your React applications, you'll see it in Angular, you'll see it in Vue.js, and all the other major frameworks that are out there. You'll see classes are a very common way of defining a container for a set of data, and a set of behaviors, methods, that can run against those.