Classes in ES6
Photo by Ilya Pavlov
Learning what are Classes
Javascript is based on “prototypes”, not classes. Prototypes allow inheritance of objects and classes. Classes are used for cleaner and easier to read code/syntax. A prototypal inheritance is an object that inherits a child of another object. The object is referred to as the constructor or prototype. The below code is an example of prototypal inheritance being used.
Understanding classes is hard and it is recommended to have a solid understanding of a basic/fundamental object oriented programming or the technical term polymorphism(It is the concept of Object Oriented Programming). Polymorphism in Javascript is important since it ensures code to be “DRY” ( Don’t Repeat Yourself ). “Polymorphism” relates to “DRY” since it allows functions or methods to be called (calling is usually when an object is pulling information from outside its own scope) and avoids rewriting the same code. Classes help Javascript syntax to look cleaner and more pleasant to the eye of the reader as well as make it easier to use inheritance for the object that’s being pulled. Very similar to functions but with a more organized structure/syntax inside it. The syntax can get confusing when implementing methods like a constructor to help the class to run.
What is a constructor
Classes have rules like any other object in JS. All Classes need the constructor method to work properly and the object can only have one constructor. The constructor will be automatically be declared if not defined in the text. The entire constructor method needs to be in the scope to work properly.
A constructor holds parameters and when called outside the scope of the class with the keyword “new”, it then pulls the arguments from the instance (a declaration that uses the class variables to make a new object). The below example contains arguments that are being passed into constructor to allow the whole class to use the arguments.
This is more useful than functions since it allows the user to build multiple objects with different variable values and having their code DRY at the same time. Before making a constructor it is important to understand the “new” keyword. The new keyword prevents the user from changing the original object but rather creating a new object. The new keyword will be used when making an instance which will call the class. Inside the constructor method is a getter or setter which is declaring variables with the “this” keyword referencing the object or class name it belongs to.
What is super
Another method used a lot in classes is super(). The method super is used to keep code DRY and replicate the constructors parameters/variables. Super isn’t just used in classes but for now were going to focus on only classes. Super is usually used when a child class extends it parent and retrieves the properties from the parent to its own class and adding more unique properties onto itself.
When using super it’s important to keep in mind that the keyword “this” will be undefined until super class is used. For this child classes example, Gorilla will be the child class and Animal will be the parent class. Super is pulling information from the constructor method into its parameters which allows the keyword “this” to pull the argument from the instance that called the constructor method. To simplify this image the super method is calling the Animals classes parameters to use them for the Gorilla class. It’s important to know that super can also be used to as an object to refer to an instance.
Summary
Now we added everything we just learned into one simple concept. Classes are just complicated functions that allow for easier syntax and less repeated code. To begin the class you need a constructor before anything is started. The constructor will pull arguments from an instance that will call the entire scope of the class. The constructor will need parameters so it can pull the arguments from the instance. It is recommended to capitalize the first letter of the class name just for convention purposes. Some people will refer the constructor as the blueprint to the class. Inside the constructor is the keyword “this”. The keyword would refer to the class name in this case. We use the “this” keyword to define variables that we latter contain a value. Other parts of Classes are the child classes. Child classes have the keyword super(). Super will pull information from the constructor to create a new object different from its parent. To create the object you need an instance that contains arguments. The below image shows this well.
The String values or other data types then are pushed inside the constructor of the class to make the new unique object that came from the original object. It’s important to remember that when creating a child class anything inside it will override the parent.
