Classes in JavaScript

Class Basics

Classes are blueprints to create Objects. When a class is set up with all of the properties and functions for the object, this class can then be used to create any number of identical Objects.

Important notes on classes :

It is common to capitalize the first letter of the class name to make clear it is a class and not a function.
A constructor(value, value) function is used to initialize and assign properties to the class.

class MyClassName() { constructor()}

↓ Examples ↓

class Passenger {
    constructor(firstName, lastName, frequentFlyerNumber) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.frequentFlyerNumber = frequentFlyerNumber;
    }
}

let passenger = new Passenger('Tiana', 'Simian', 1234);

console.log(passenger); //    RESULT: Passenger4 {firstName: "Tiana", lastName: "Simian", frequentFlyerNumber: 1234}

let passenger2 = new Passenger('John', 'Daily', 5678);

console.log(passenger); //    RESULT: Passenger4 {firstName: "John", lastName: "Daily", frequentFlyerNumber: 5678}

Class Iheritance

Two important focuses when creating classes are:

Reusability - Don't Repeat Yourself (D.R.Y).
IS-A - "Is this a that?" This is the basic way to think about the relationship between parent and child objects. If two objects are different versions of one thing, there will likely be common properties and functions. These can be held in a parent class. If the parents are different versions of something, a parent class for them can house common items. With this in mind, it is important to ensure that a property or function is actually used by another before making assumptions. Just because two items are similar does not automatically mean that the common items will be used by both.

NOTE: When extending a class, super() must be used to invoke the parent class' constructor.

↓ Example ↓

class BMW {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    //    Functions can be made available to all child Objects
    start() {
        console.log('Start Engine');
    }
    stop() {
        console.log('Stop Engine');
    }

}


class ThreeSeries extends BMW {
    //    Adding one parameter that does not exist on the parent
    constructor(make, model, year, cruiseControlEnable) {
        //    This is needed to invoke the parent class' constructor
        super(make, model, year);
        this.cruiseControlEnable = cruiseControlEnable;
    }
}


class FiveSeries extends BMW {
    //    Adding one parameter that does not exist on the parent
    constructor(make, model, year, parkingAssistEnabled) {
        //    This is needed to invoke the parent class' constructor
        super(make, model, year);
        this.parkingAssistEnabled = parkingAssistEnabled;
    }

    //    Override a parent function
    start() {
        console.log('Remote Start');
    }
}


//    Create both ThreeSeries and a FiveSeries object
let threeSeries = new ThreeSeries('BMW', '328', 2018, true);

let fiveSeries = new FiveSeries('BMW', '535', 2018, true);


//    Display full
console.log(threeSeries); //    RESULT: ThreeSeries {make: "BMW", model: "328", year: 2018, cruiseControlEnable: true}

console.log(fiveSeries); //    RESULT: FiveSeries {make: "BMW", model: "535", year: 2018, parkingAssistEnabled: true}


//    Display individual properties
console.log(threeSeries.make);
//    RESULT: "BMW"

console.log(threeSeries.model);
//    RESULT: "328"

console.log(threeSeries.year);
//    RESULT: 2018

console.log(threeSeries.cruiseControlEnable);
//    RESULT: true


//    Display individual properties
console.log(fiveSeries.make);
//    RESULT: "BMW"

console.log(fiveSeries.model);
//    RESULT: "535"

console.log(fiveSeries.year);
//    RESULT: 2018

console.log(fiveSeries.parkingAssistEnabled);
//    RESULT: true


//    Invoke parent functions
threeSeries.start();
//    RESULT: "Start Engine"

threeSeries.stop();
//    RESULT: "Stop Engine"

fiveSeries.start();
//    RESULT (different because class overwrote parent): "Remote Start"

fiveSeries.stop();
//    RESULT: "Stop Engine"