The Hidden Truths in ES6 Classes

For many developers, especially those coming from traditional languages such as Java, C#, PHP, etc. and those who have a great passion for OOP paradigm, ES6 is a huge win as the most wanted feature in Javascript finally has finally been included: classes.

Old Wine in a New Bottle

We declare a class in ES6 like below:

class A {
}

When we inspect type of A

typeof A

It will print out function. If we type above code in Chrome’s console, it will print

function class A {
}

A is just a special function in that it isn’t callable (until this point in time). Trying to invoke A() will generate ReferenceError:

Uncaught ReferenceError: A is not defined

Apparently, nothing new is shipped with ES6.

Just Convenient Syntax

Let’s see what the Javascript engine will do when it deals with a class:

class Rectangle {
    constructor(width, height) {
        this.height= height;
        this.width = width;
    }

    getArea() {
        return this.height* this.width;
    }
    toString() {
        return `Rectangle: width(${this.width}), height(${this.height})`;
    }
    static create(height, width) {
        return new Rectangle(height, width);
    }
}

class Square extends Rectangle {
    constructor(height) {
        super(height, height);
    }
    toString() {
        return `Square: length(${this.height})`;
    }
}

const s1 = new Square(10);

Below is what the Javascript engine will see:

Apparently, nothing new with ES6 classes.

It’s just syntactic sugar on top of prototype based inheritance.

An Apple vs. an Orange

Let’s see what are the differences between ES6 class and OOP language class.

Concept

In traditional OOP languages, class is a blueprint or template from which instances are created.

In Javascript, class is just a constructor function.

Behavior

In traditional languages, when creating instances, methods, properties, etc. are copied down from parent classes to child classes and then from the class to new instances.

While in Javascript, there is no such a copy from classes to classes and from classes to instances. There are just links between objects.

Features

Classes are at the heart of OOP languages. It’s no strange that OOP languages support a lot of features such as: class variable scopes, multiple inheritances, static block, nested class..

In Javascript, class is just syntactic sugar on top of prototype inheritance. Features support in class is limited. Currently, only the following are supported:

• Constructor
• Instance method
• Static method

Note that class property is not supported.

So, comparing Javascript classes to OOP language classes is like comparing an apple to an orange.