Javascript Classes

Javascript classes are a new ES6 feature that is akin to creating object constructors (object blueprints) in ES5. Classes are not a new concept, rather they are syntactical sugar that makes code more readable and easier to understand. It is recommended to learn about creating object constructors (ie. blueprints for objects) the old way , so you have a better understanding of how javascript works. It is also important to have an understaning of the old method, as lots of older (es5) code is written without using classes.

To summarize, classes make it easier to create objects blueprints, these blueprints were created using object function constructors and prototypes in ES5.

Creating a Class

We can create a new class in javascript using the following syntax

   
                         class Car {
                             constructor(make,model,manufactureYear){
                                 this.make = make;
                                 this.model = model;
                                 this.manufactureYear = manufactureYear;
                             }
                             calcAge(){
                                 const age = new Date().getFullYear - this.manufactureYear;
                                 return age;
                             }
                         }

                         // create a new instance of the Car class
                         const honda = new Car('honda','civic',2018);

                         // print the age to the console
                         honda.calcAge();
                       

The constructor method is where you put the properties of the class you create. There can only be one constructor object for every class you create.

After the constructor method you can define the prototype methods for that class. Prototype methods can simply be thought of as functions related to the class it is in. For instance, calcAge is a function belonging to the class car

Class Declarations are not hoisted

You must declare a class before you access it.

   
                      // Will Not work
                      // Car is not defined yet. If classes were `hoisted` then this would work
                      const honda = new Car('honda','civic',2018);  

                      class Car {
                             constructor(make,model,manufactureYear){
                                 this.make = make;
                                 this.model = model;
                                 this.manufactureYear = manufactureYear;
                             } 
                      
                       

Typically classes are stored in seperate javascript files and then imported into the html file before the closing body tag. In addition, you can create module exports for each class if you are working on a larger project.