Javascript Class Syntax

Of all the changes adopted in ECMAScript 2015 (ES6), none may be quite as controversial as the introduction of the class keyword. A quick google search yields mixed messages -- many are avidly for or against this it. Some feel that javascript is giving in to the pressure from other popular classical programming languages like Python and Java. Controversy aside, the class keyword hides complexity and allows even the inexperienced developer to quickly leverage the power of javascript's prototype inheritance style of object oriented programming with clear, concise code. This article will introduce javascript class syntax and creation of static class methods.

Creating "Classes"

The javascript class is really just a handy type of function. When invoked with the new keyword, it:

1. Creates an object
2. Points the newly recreated object to the class constructor's prototype object
3. Adds properties and methods, if specified, to object
4. Returns newly created object

Let's see class in action:

class Nfl {
    constructor(){
        this.sport = "American Football";
        this.level = "Professional";
        this.salaryCap = 188200000;
    }
    raiseSalaryCap(newCap){
        this.salaryCap = newCap;
    }
}

Calling new Nfl() will create and return a new object with access to the Nfl class properties, as well as the raiseSalaryCap method. this will conveniently refer to the specific instance of Nfl. Prior to ES6, it was necessary to attach methods directly to the constructors prototype in order for them to be inherited by instances. class takes care of it for us!

Subclassing

When creating subclasses, we can extend from any other class, instead of explicitly pointing our subclass to the constructor's prototype.

class Team extends Nfl {
    constructor(name){
        super();
        this.name = name;
    }
}

Any new Team() will still have access to Nfl's properties and methods via its prototype. This connection is created through the use of the extend keyword and super. We don't have to explicitly set it. Nice right?

Static Methods

Ok, so how do we create a method on a class that we might not want a subclass to know about? Say we want our Nfl class to have a helper function that prints out the names of all teams given as arguments-- something that would NOT be relevant to any team instance. To do that, we can use the static keyword. Let's modify our Nfl constructor function:

class Nfl {
    constructor(){
        this.sport = "American Football";
        this.level = "Professional";
        this.salaryCap = 188200000;
    }
    raiseSalaryCap(newCap){
        this.salaryCap = newCap;
    }
    static printTeams(...teams){
        teams.forEach( team => {console.log(team.name)});
    }
}

We can invoke this static method by referencing the Nfl object.

//create some teams
const saints = new Team("Saints");
const cowboys = new Team("Cowboys");

//print team names to console
Nfl.printTeams(saints, cowboys)
//Logs:
  Saints
  Cowboys

Attempting to call the printTeams method on a Team instance will throw an error as the static method is not able to be referenced via prototypal inheritance.

saints.printTeams(saints, cowboys)
//throws error, saints.printTeams is not a function 

In short, the class keyword and features allows anyone utilize prototypal inheritance even with little understanding of what is going on under the hood. While this may drive the more traditional javascript developer nuts, it is a powerful tool that mimics classical OOP in simple and concise syntax. With the static keyword, you can share only the methods you want with instances and subclass instances. I guess you can say they are finally putting the Java in Javascript.