Object Oriented JavaScript Tutorial #4 - Classes

Key Takeaways

so we've made this user object right now with methods and properties but what if we wanted more than just one user object well we've seen that what we could do is create several different user objects like this one for each different user but notice we're repeating ourselves a lot we've rewritten the login and logout functions several times these properties several times and quickly this could get out of hand what if instead I wanted an easier way to create a user object what if I wanted to do something like this I could say VAR user four is equal to a new user and then just pass in some parameters over here like so well we can do this and we can do this in a couple of different ways now one way is to use the parameter time model but with the release of es6 we gained a little syntactic sugar so that we can solve this problem using classes as well now under the hood classes essentially do the same thing as working with prototypes in JavaScript but some people think that classes are nicer or easier to work with and they do not need to as well however not everyone likes this new class syntax since JavaScript as a language doesn't really have classes built into it so this is just some syntactic sugar which emulates the idea of classes in JavaScript and under the hood classes are just doing the same thing as the prototype model so we'll focus on classes for now and try to keep it simple to begin with but I will also add on some lectures towards the end of this series about what's actually going on under the hood using prototypes because I think by understanding what's going on behind the scenes it's gonna make you a much better developer so anyway back to the problem at hand if we only ever need one type of object then something like this would do just making an object literal right but if we ever want to create multiple versions of the same type of object like this we want to create several different users then what we're going to do is use a class to do that instead of manually creating several different object literals like we have done right here because a JavaScript class allow to easily create multiple objects of the same type by doing something like this so you can think of a class in JavaScript as a bit like a blueprint that describes a particular object in a non specific way for example a class that describes a car would have a color property and every car would have that property it would have a color so we define those properties in our class for the car our blueprint for the car but we don't say what color the car is because that is specific to each individual instance of that class so when we create a new instance of this class we're creating a new car object and then at that point where we create it we pass to the class a parameter which is the color of that car we can say okay we want to use the car class to create a red car or a blue car or a green car or a purple car and so forth we can easily create these car objects using the car class and we pass in that color each time around so that all the same type of object there are cars but they all have different property values they all have a color but with a different value in the same way we could have a class for a user so a user has an email address a name maybe a status to say whether they're online or offline that could be true or false they also have a login method and a logout method now whatever we create a new user we're going to use this class and we're going to pass in the values of these different things right here so we could create user one and pass in these values and user 2 and pass in these values in both cases these objects that we're creating for each individual user is using this user class but they're different instances of that object they have different values they have the same property names email name status login and logout so they have all the same kind of mechanics under the hood but they have different values so what we're going to be doing is using a class to create instances of that type of object okay so let's keep it simple to begin with and just create an empty class so we'll get rid of all of this junk that we've written over the last couple of lessons and instead create one single class now the way we do this is by saying first of all the keyword class that says we want to create a class then the name of the class itself now Convention says that we start this with an uppercase letter so I'll call it user with a capital u then we open and close our curly braces and this right here this is now an empty user class so it's set up and ready to go and we can start adding properties and methods to this class in the next video