So then hopefully now you're getting the hang of what a class is and how we can use them to create new
types of objects.
Now I want to introduce you to the idea of class inheritance in JavaScript, otherwise known as subclasses.
Now subclasses are classes which inherit functionality from another class but also have their own additional
properties or methods too.
In other words, a subclass extends another class.
For example, imagine we want to create an admin user class so we can create new admin objects.
Now an admin would have all of the same properties and methods that a regular user would have right
here.
They can log in, they can log out, they have an email, a username, etcetera.
But they would also have an extra method maybe to delete other users.
So we wouldn't just add that method to the regular user class because that means that any user created
with this class could then delete other users.
Instead, we should create a new admin class which then extends this user class so it inherits all of
this stuff a regular user has.
But we can also define the extra methods or properties on it which only admins will have.
So by extending the class and inheriting all of the users properties and methods, it means we don't
have to completely rewrite all of these in our new admin class and it makes the code much more reusable.
So let's give this a whirl.
So the first thing I want to do is come down here and actually create this admin class.
So class admin.
Now what we want to do is extend from the user class because we're inheriting from that class.
So the way we do that is by saying now extends and then the class we want to extend from, which is
the user class.
So now when we're creating this class, it's saying, okay, well find the user class and inherit all
of this stuff automatically from the user class and it does that.
So now if we were to create a new admin, then it would still have all of these different methods and
properties and I can demo that.
What I'm going to do is come down here and say const user three is now equal to a new admin.
I'm still going to pass in a name and an email, so I'll say Sean and then Sean at the net ninja.co.uk.
And then I'm going to log this out down here.
User three at the end, save that and preview.
And now we can see we get an admin, so we get two user objects, then an admin object and inside it
we can still see the email property, the score, the username and these two methods down here we have
a log in and a log out.
We have a couple of nested properties.
Don't worry about that.
Again, I'm going to explain these later, but ultimately we can see these methods which we have access
to.
So I could say user three dot log in and that is going to work.
So now we're creating this admin class that extends the user class and we're getting all of these properties
and methods inherited into this class.
So that's pretty awesome.
And now we can define extra methods or properties inside this class if we want to that only admins have.
So when we're creating a new admin and we pass in this stuff over here, if this admin class does not
have a constructor inside it like this, then automatically it will look at the class that it extends
from and it will call the constructor of that.
Now we can also define methods over here, which is what I'm going to do.
I'm going to create a method called delete user and I'm going to inside this method eventually delete
a user.
Now, in order to do that, first of all, I want to come down here and I want to create a new array
which is going to be an array of all of these users.
So let me say let users equal to an array and then we'll pass in user one, user two and user three.
So all of these different users that we've created now are inside this user's array.
Now as an admin, I want to be able to delete one of these users from this array.
So first of all, let me log this to the console console dot log users like so and save it.
And we can see all of these three users.
One of them is an admin, but these two are users.
Now I want to be able to do something like this.
I want to say user three, which is our admin here.
Then call the delete user method.
So dot delete user and pass in a user from this array that I want to remove from the array.
So I could say user two for example, and that is going to delete user two from the array.
So in order to do this, let me flesh out this function up here.
So I'm going to say now users are going to be equal to users dot filter.
So we're taking the users array right here and we're setting.
Equal to a new array based on this filter method.
We've seen this in the past.
The filter method iterates an array, fires a callback function for each item in the array and returns
either true or false for each one if we return.
True, it keeps the item in the array.
If we return false, then it removes the item from the array.
Now, as we fire this callback function for each item, I'll refer to each item in the array as you.
For user.
We also want to take in the user as a parameter up here when we call delete user.
So we're passing in user to now we're referring to that inside this method as user, we're filtering
the users and for each user in the array we refer to each one as you.
So what I'm going to do is return false.
If the name of this user is equal to the name of this user because that's the user we want to remove
from the array.
So in that case I return false.
Therefore it will be filtered out.
Otherwise I return true.
So what I'm going to say is return and we want to return you.
Username is not equal to user dot username.
So if the current item or the current user we're iterating if their username is not equal to the user
dot username, then we're returning true because therefore we want to keep that user in the array.
Now if the username of the current user is equal to this username, then we're returning false because
in that case we want to filter this user out of the array.
So let me just give this a whirl.
I'm going to console dot log users again down here to make sure this is worked and we want to eliminate
or delete this user from the array.
So we can see right here we have this user, this user and this user.
But down here we just have the top one and the admin.
So this has worked and we've deleted this user from the array using the filter method.
So now let me just neaten this and put it on one line because we have one return statement so skewed
that up here and we don't need the curly braces.
We also don't need the parentheses around this parameter.
And there we have it.
That is exactly the same.
Save it and make sure it still works and cool it does.
So now, my friends, we have a new class admin which extends the user.
It inherits all of the same methods and properties that a user has, but now only admins has this delete
user method.
And if we try to say for example user one dot delete user and then pass in user three, then we wouldn't
be able to do this because a regular user object doesn't have the delete user method.
So if I try this then we're going to get some kind of error.
User one Delete user is not a function, so now only admins can use this method.
So that's the basics of class, inheritance or subclasses as they're also known.
But what if our admins right here?
What if we need to attach extra properties as well as methods?
For example a custom title property?
Well, in order to do that we'd need our admin class right here to have its own constructor, but also
inherit the properties from this constructor right here.
And we'll see in the next video how to do that.
