ES6 Classes

ES6 Classes

Written by Nathaniel Foster and edited by Tierney Cyren

Object-Oriented Programming (OOP) can be a great way to organize your projects. Introduced with ES6, the javascript class syntax makes OOP easier.

Before the class syntax was available, if you wanted to do OOP you would need to use a constructor function.

    function Dog (name) {
      this.name = name;
    }

    var fido = new Dog('Fido');

    console.log(fido.name); // 'Fido'

This worked well, until you wanted to add inheritance or someone forgot to use the new keyword when using the function.

The ES6 syntax is a little more verbose, but not that different.

    class Dog {
      constructor (name) {
        this.name = name;
      }
    }

Methods

Prototype Methods

Prototype methods are methods that are attached to instances of a class. ES6 makes adding methods to our classes easier and more readable.

With constructor functions, we would have to modify the prototype of our function directly.

    function Dog (name) {
      this.name = name;
    }
    
    Dog.prototype.sayHi = function () {
      return 'woof';
    }

With ES6 classes, we can add the method definition directly in the class declaration.

    class Dog {
      constructor (name) {
        this.name = name;
      }
    
      sayHi () {
        return 'woof';
      }
    }

Static methods

Static methods are methods which are added to the class itself and are not attached to instances of the class.

    class Dog {
      constructor (name) {
        this.name = name;
      }
    
      static isDog (animal) {
        return Object.getPrototypeOf(animal).constructor.name === this.name;
      }
    }
    
    var fido = new Dog('Fido');
    
    fido.isDog; // undefined
    
    Dog.isDog(fido); // true

New Keyword Protection!

As mentioned before, constructor functions work pretty well. One instance where you can run into trouble though is if the function is invoked without the new keyword. When this happens instead of creating a new object the function behaves like a regular function and adds the properties to the global object–in browsers this would be window.

    function Dog (name) {
      this.name = name;
    }
    
    // missing new keyword
    var fido = Dog('Fido');
    
    console.log(fido); // undefined :(
    console.log(window.name); // 'Fido' :(

One nice feature of ES6 classes is the constructor function will only be invoked when using the new keyword.

    class Dog {
      constructor (name) {
        this.name = name;
      }
    }
    
    var fido = Dog('Fido');  // Class constructor Dog cannot be invoked without 'new'

Inheritance

Another nice feature of ES6 classes is that they make inheritance much easier.

With constructor functions, there were a few manual steps that had to be taken to properly implement inheritance.

    function Pet (name) {
      this.name = name;
    }
    
    function Dog (name, tricks) {
      // invoke the Pet constructor function passing in our newly created this object 
      // and any required parameters
      Pet.call(this, name);
    
      // add additional parameters
      this.tricks = tricks;
    }
    
    // inherit the parent's prototype functions
    Dog.prototype = Object.create(Pet.prototype);
    
    // reset our child class constructor function
    Dog.prototype.constructor = Dog;

ES6 classes make inheritance much easier. We no longer have to manually copy the parent class's prototype functions and reset the child class's constructor.

    // create parent class
    class Pet {
      constructor (name) {
        this.name = name;
      }
    }
    
    // create child class and extend our parent class
    class Dog extends Pet {
      constructor (name, tricks) {
        // invoke our parent constructor function passing in any required parameters
        super(name);
    
        this.tricks = tricks;
      }
    }

Final thoughts

In closing, ES6 classes provide an easy way to write object-oriented style javascript. When comparing to the options we had with ES5 and earlier, ES6 classes provide a clean and concise way to write object-oriented JavaScript. If you have used OOP in JavaScript with ES6 classes and would like to share what you’ve done, tweet a link to a gist or repo and use the hashtag #JavaScriptJanuary to let us know!

The Open Sourcerer's Magic Spell Book

The Open Sourcerer's Magic Spell Book

The Future of JavaScript is Distributed

The Future of JavaScript is Distributed