In a previous post I introduced how ES6 can be transpiled to ES5 using Traceur or Babel. By using transpilers you can write“modern” code and leverage features found in ES6 today while still allowing the code to run in older browsers. In this post I’m going to dive into classes which is one of the shiny new features found in ES6.

Getting Started with ES6/ES2015 Classes

Classes are the subject of much debate in the JavaScript world with some people loving them and others hating them. I’ve never believed in one world view being right for every situation and think that classes definitely have their place. If nothing else they’re worth exploring so that you understand the different options provided by ES6. If you want to continue with the more traditional “functional programming” techniques available in JavaScript it’s important to note that you can still do that. Classes are an option provided by ES6 but certainly not required to write ES6 code.

Here’s an example of an ES6 class that defines an automobile:

class Auto {
    constructor(data) {
        this.make = data.make;
        this.model = data.model;
        this.year = data.year;
        this.price = data.price;
    }

    getTotal(taxRate) {
        return this.price + (this.price * taxRate);
    }

    getDetails() {
        return `${this.year} ${this.make} ${this.model}`;
    }
}

If you’ve worked with languages such as Java, C# or others that support classes the general syntax will probably look familiar. You can see that the class keyword is used to define a container named Auto. The class contains a constructor that is called when the class is created using the new keyword (more on “new” later). The constructor provides a place where you can initialize properties with values. In the Auto class example above a data object is passed into the constructor and its properties are associated with the make, model, year and priceproperties.

The Auto class also defines two functions named getTotal() and getDetails() as well. You’ll quickly notice that the function keyword isn’t used to define each function. That’s a new feature available in classes (and in others parts of ES6 such as functions in object literals) that provides a nice, compact way to define functions. Within the getDetails() function you’ll also notice another new feature in ES6 – template strings. I’ll provide additional details about this feature in a future post.

The class code shown above is referred to as a “class definition”. Classes can also be defined using a “class expression” syntax as well. An example of a class expression is show next:

let Automobile = class {
    constructor(data) {
        this.make = data.make;
        this.model = data.model;
        this.year = data.year;
        this.price = data.price;
    }

    getDetails() {
        return `${this.year} ${this.make} ${this.model}`;
    }
}

The Automobile variable in this example is assigned to a class expression that has a constructor and a getDetails() function. The let keyword used in this example creates a local scoped variable. If you put this code inside a block such as an if statement or for loop the variable’s scope will be limited to the block. That’s another new (and very welcome) feature provided by ES6.

ES6 classes can also contain property get and set blocks if desired. This is done by using  the get and set keywords:

class AutoWithProperties {
    constructor(data) {
        this._make;
        this._model;
    }

    get make() {
        return this._make;
    }
    
    set make(val) {
        if (val) {
            this._make = val;
        } else {
            this._make = 'No Make';
        }
    }
    
    get model() {
        return this._model;
    }
    
    set model(val) {
        if (val) {
            this._model = val;
        } else {
            this._model = 'No Model';
        }
        
    }
}

The AutoWithProperties class defines two properties named make and model that read (the get block) and write (the set block) to and from backing properties named _make and _model.