Jonas: Let's now talk about one of the biggest
additions to ES6, and that is classes.
Now, classes actually don't add anything new
to the language, they're just synthetic sugar
over the way we do prototypal inheritance in JavaScript,
and that means that classes simply make it easier
to implement inheritance and to create objects
based on blueprints.
So, in ES5, these blueprints are called
function constructors, right?
And we edit methods to their prototype properties
in order to make all the instances created through
a function constructor inherit these methods.
So, let's start by doing that now,
and then write the same code with ES6 classes after that.
So, ES5, and I'm going to create
a person function constructor,
so do one that we already know very well.
So Person5, because of ES5 is a function
which accepts the name, the year of birth,
and also a job, okay?
And I'm writing it as a function expression here, okay,
but I could also equally have written it
as a function declaration, so it works the exact same way.
So, all of this is nothing new.
Okay, so this.yearOfBirth is year of birth, of course,
and finally the job is a job that we input.
Alright, and now to make all the instances
inherit a calculateAge method.
It's as easy as adding it to the prototype property
of the function constructor, right?
So all of this is nothing new.
But, so here we can practice it a little bit more, okay?
So the age is, and let's actually create a new date here
so that we are always up to date with the year.
So get full year minus the year of birth.
Understand, simple, log this to the console.
So very simple stuff.
And just to test it, john5 is a new Person
called John, born in 1990, and let's say
that he's a teacher.
Okay, so this is the way that we used to do it in ES.
Let's now do the exact same thing but using ES6 classes,
so that you can see the big difference.
And so we use the class keyword, and then we simply
say the name of the class, which is similar
to the name of the function constructor that we used before.
So this should be called Person, and I'm gonna call it
Person6 here, and that's it.
So it looks a bit like a function declaration, right,
but this is actually a class declaration,
and the way that a class declaration works
is that all classes have to have the constructor method,
okay, so we have to write constructor,
and this is where we define the initial properties
that we want in our object.
So again it's going to be, of course,
name, year of birth, and a job.
And then this looks like just a regular function,
and what we then do here is the exact same thing
as we did before, so we have to say this name
is equal to the name that we pass in,
this.yearOfBirth, should be year of birth,
which is the one that we pass in here.
And of course the same with the job.
Okay, so again, this part here,
the constructor part, which every class declaration
has to have is very similar to this part here
of the function constructor.
Now, if we want to add a method to this,
we simply would also here in the class.
So all we have to do now is to say calculateAge,
and that's it, now we can add our code in here.
So there's no function keywords here, no prototype
like we had to do here.
No, all we do here is to simply add this new method
right to our class.
And note that we don't have any separating punctuation here,
okay, so no commas or no semicolons
like in objects, for example.
In here, in the class definition,
we don't need anything like that, okay.
So I'm just gonna copy the code from the calculateAge
method there to here, because everything
is gonna work the same, and that's it.
So this class here is now effectively
the exact same thing as this, but it's nicely structured
here into this entire class and it looks a bit better,
and is also easier to write.
And so that's why we say that it's synthetic sugar.
And let's now create an instance of this class,
and I'm gonna make it a constant, so john6 is a new Person6
called John, also born in 1990, and he is also a teacher.
And what I want to do now is to actually show you
in a console that these two things are the exact same thing.
So let's take a look at them here in the console.
So john5 and john6, and let me open them.
And here we see that they actually look the exact same,
right, so all of these are the same.
The prototype is still the object
and in here we inherit the calculateAge method
that we defined up here, okay?
And then in here in the prototype,
we also have the calculateAge method,
which is of course this one here.
So writing it like this is under the hood of JavaScript,
behind the scenes, converted to the exact same thing
as we wrote in the old way.
So again, this is just synthetic sugar,
which makes it easier to write classes
than it was before.
And actually, there are some people criticizing classes,
because they basically hide the object-oriented
nature of inheritance in JavaScript,
and so some beginners who don't learn about that,
they may never really understand how inheritance works
behind the scenes in JavaScript.
But you do understand it, right?
And so you're 100% ready to start using ES6 classes.
Now, another thing that we can do with classes,
is to add static methods, and static methods
are methods that are simply attached to the class,
but not inherited by the class instances,
so by objects that we create through that class.
So I actually think that this isn't really helpful,
but I still wanted to show it to you.
So let's say that we want to add a static class here
simply called greeting.
And all we do is to log something to a console.
Let's say, Hey there.
So we can use this like as helper functions.
So in order to use this, we cannot use it on John,
because it's a static method, and as I said,
these instances are not gonna inherit it.
And so, all we can do is to call it like this.
So, Person5.greeting.
So it's basically a method that is attached
to this class definition,
and this class definition is under the hood,
behind the scenes, a function definition,
and so, it's also an object as you already know.
And so we know that we can attach methods to an object,
and so that's simply what we're doing here.
So if we now reload this, we get this error here,
and that's simply because I misspelled it.
But now, of course it works with our Hey there
string log to the console.
So again, that part, I think is not really useful,
but we can still use it if we want.
Alright, so that's it for the fundamentals of ES6 classes.
Just two more things that I need to say here,
and first, the class definitions are not hoisted,
so unlike function constructors,
we need to first implement a class,
and only later in our code we can start using it.
So, this is a very important thing to keep in mind.
And second, we can only add methods to classes,
but not properties.
But that's not a problem at all,
because inheriting properties through the object
instances is not a best practice anyway.
And so, that's why this rule is now really enforced
here in classes.
Okay, so in the next lecture,
we will see how to implement inheritance
from one class to another, and that's a very cool topic,
so don't wait and move right to the next lecture.