Understanding ES6 Classes

Under the hood, es6 class are not something that is radically new: they are just syntactic sugar over the prototype-based behavior delegation capabilities we’ve had all along. This does make the code more readable and lays the path forward for new Object Oriented (OO) features in the upcoming spec releases.

Defining Classes

Let’s refresh our memory and look at a typical way of wiring OO code in ES5.

function person(name, dob) {
  Object.defineProperty(this, 'name', {
    get: function() { return name; }
  });

  Object.defineProperty(this, 'dob', {
    get: function() { return dob; }
  });
}

person.prototype.toString = function() {
  return this.name + ' ' + this.dob;
}

var person = new person('Chuks Festus', 2017);

console.log(person.name); // Chuks Festus
person.name = 'John Doe';
console.log(person.toString()) // Chuks Festus 2017

Pretty simple huh? we’ve defined a peron class with two read only properties and a custom toString method. Lets do the same thing in ES6.

class person{
  constructor(name,dob){
    this._name= name;
    this._year = year;
  }
  get make() {
    return this._name;
  }
  get year() {
    return this._dob;
  }
  toString() {
    return `${this.name}${thi.dob}`
  }
}
let person =new person('chuks festus',2017);

console.log(person.name); // Chuks Festus
person.name = 'John Doe';
console.log(person.toString()) // Chuks Festus 2017

So lets try breaking it down:

Defining Classes

Just like functions, there are two ways to define a class in javascript: Class expression and class declaration

Class Declaration

To declare a class, you use the classkeyword with the name of the class

class person {}

One important thing to note here is that unlike function declarations, class declarations can’t be hoisted. You first need to declare your class and then access it, otherwise you get a ReferenceError:

let chuks = new person(); // ReferenceError

class person {}

Class expressions

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class’s body.

//unnamed
let person = class {
    constructor() {
    } 
}

//named 
let person = class person {
    constructor () {
    }
}

Its important to note that Class expressions also suffer from the same hoisting issues mentioned for Class declarations.

Constructor

The constructor method is a special method for creating and initializing an object created with a class. There can only be one special method with the name "constructor" in a class.

class person {
    constructor (name, dob) {
        this.name = name;
        this.dob = dob;
    }
}

Static Methods

Static methods are often used to create utility functions for an application. In ES5 it looks like a basic property on a constructor function.

function person () {}

person.compare = function (a,b) {}

And the new shiny static syntax looks like this:

class person {
    static (a,b) {}
}

Static methods are called without instantiating their class and cannot be called through a class instance.

Under the covers, JavaScript is still just adding a property to the personconstructor, it just ensures that the method is in fact static. Note that you can also add static value properties.

Extending Classes

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

class person{
  constructor(name,dob){
    this name= name;
    this year = year;
  }
  make() {
    return this._name;
  }
  year() {
    return this._dob;
  }
  toString() {
    return `${this.name}${thi.dob}`
  }
}

class gender extends person { 
    male(){
        console.log(this.name + " is a dude")
    }
}

let chuks = new gender("chuks", 2017)
chuks.male()

Super class

To call a parent constructor you simply use the super keyword as a function, eg super(name, dob). For all other functions, use super as an object, eg super.toString(). Here’s what the updated example looks like:

class Gender extends person {
    toString() {
        return 'male' + super.toString();
    }
}

At this time, there isn’t any advantage to using classes over prototypes other than better syntax. However, it’s good to start developing a better practice and getting used to the new syntax. The tooling around JavaScript gets better every day and with proper class syntax you will be helping the tools help you.