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 asign 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 thinking through of 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 parents are different versions of something, a parent class for them can house common items. With this, it is important to be sure the property or function is actually used by another before assuming. Just because two items are similar does not automatically mean the common items will get 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
//    RESULT: "BMW"

//    RESULT: "328"

//    RESULT: 2018

//    RESULT: true

//    Display individual properties
//    RESULT: "BMW"

//    RESULT: "535"

//    RESULT: 2018

//    RESULT: true

//    Invoke parent functions
//    RESULT: "Start Engine"

//    RESULT: "Stop Engine"

//    RESULT (different because class overwrote parent): "Remote Start"

//    RESULT: "Stop Engine"

One Reply to “Classes in JavaScript”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

↑ Back to Top