Javascript Class Syntax
Tags: javascript
Published: 2019-09-30 05:23:34

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``.