Future of JavaScript – ECMAScript 6 (ES2015) Classes

  • Article

This tutorial series will take a look at the future of JavaScript. It will take an in-depth look at ECMAScript 6 (ECMAScript 2015), the latest version of the standard for JavaScript. Throughout the series, you will learn about new language features and what you can build with them. You are expected to have an understanding of JavaScript.

Level: Intermediate to Advanced.

Part 3 – Introducing Classes

Welcome to the third part of the Future of JavaScript tutorial series. In this part, we will explore new syntactical sugar added to JavaScript to simplify dealing with objects & inheritance (classes).

Inheritance in JavaScript

Object inheritance is a common point of confusion for developers learning JavaScript. In particular, developers experienced with object-oriented languages like Java, C# or C++ will try to develop similar inheritance chains. JavaScript object inheritance is based on prototypical inheritance.

In JavaScript, objects can be described as a dynamic collection of key-value properties. You can add, change and remove properties from any object in JavaScript thus objects are mutable. To implement inheritance with JavaScript objects, we use prototyping in which you use an existing object and clone it to create a new object. Douglas Crockford wrote in this article: “Instead of creating classes, you make prototype objects, and then use the object function to make new instances. Objects are mutable in JavaScript, so we can augment the new instances, giving them new fields and methods. These can then act as prototypes for even newer objects. We don't need classes to make lots of similar objects.”

The prototypical inheritance model is more powerful than class-based inheritance model. Further, you can use prototypical inheritance to recreate a sort of class-based inheritance model. If you’re trying to inherit and share “methods” among objects, your inherited function acts like just another property that was cloned to the new object. The “this” in the cloned function will point to the new cloned object and not the object it was cloned from. Developers experienced with Java and C++ will certainly be confused by this point and if you’re unaware of this major difference in programming paradigm, you will certainly write buggy code.

ES2015 adds syntactical sugar to make it easier for developers used to class-based object inheritance pattern.

Introducing Classes Syntactical Sugar

ES2015 introduces syntactical sugar to make it easier for developers. The new keywords introduced are class, constructor, static, extends, and super. Do not forget though that JavaScript remains prototype-based.

Classes are in fact just functions. You can declare a class, just like functions, using declarations and expressions.

 1234
 
 class GameState {}var GameState = class {}

ES2015 also introduces the constructor keyword. This is a special function used to initialize an object created with a class. If you don’t define your own constructor, there are default constructors that do nothing or pass arguments to the parent constructor (see next paragraph).

 1234
 
 class GameState {    constructor(players){    }}

ES2015 also introduces the extends and super keywords. Extends is used to tell an object to inherit from another object, forming a parent-child relationship. Super is used to call a function in the parent object from the child object (if there is indeed a parent). Notice how calling the parent constructor differs from called a parent function.

  1 2 3 4 5 6 7 8 91011121314151617
 
 class Dog {    constructor(name) {    }    bark() {        console.log("bark");    }}class Poodle extends Dog {    constructor(color, name) {        super(name);    }    bark() {        super.bark();        console.log("wooooof");    }}

Finally, one more keyword was introduced in ES2015 and that is the static keyword. The static keyword allows you defined a static function that can be called without creating a new instance of the object. It is also not callable from the class when it is instantiated. You can mostly use this keyword to create utility functions.

Wrapping Up

The new keywords introduced in ES2015 make it easier for developers to recreate some of the programming patterns from other languages like C#, Java or C++. You do have to remember though that these new keywords are only syntactical sugar meant to make development easier but do not change the underlying prototypical inheritance model. Don’t forget that!

What's Next?

In the next parts of this tutorial series, I will be discussing different language features such as generators & iterators, block scoping, arrows, and more. I will also be sharing strategies for how best to manage a transition to ES6 either through transcompilation or using shims for different features. Stay tuned for the next edition!

You can always reach me through Twitter or LinkedIn.

Missed the Previous Parts?

You can read the previous parts here:

Other Resources