ES6 Classes


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); 

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; } }

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 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; Dog.isDog(fido); 

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; } var fido = Dog('Fido'); console.log(fido); console.log(window.name); 

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'); 

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) { Pet.call(this, name); this.tricks = tricks; } Dog.prototype = Object.create(Pet.prototype); 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.

 class Pet { constructor (name) { this.name = name; } } class Dog extends Pet { constructor (name, tricks) { super(name); this.tricks = tricks; } }

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!

Emily Freeman

The contributors to JavaScript January are passionate engineers, designers and teachers. Emily Freeman is a developer advocate at Kickbox and curates the articles for JavaScript January.