How JavaScript classes allows us to do less typing (syntactic sugar)?

📌 Syntactic sugar is a term to describe a feature in a language that lets you do something more easily/with less typing involved, but doesn’t really add any new functionality to the language that it didn’t already have.

For example, you can write x = x + 5; to add 5 to the variable x, JavaScript allows you to just write x += 5; which does the same thing (there are also compound operators for subtraction (-=), division (/=), etc).

JavaScript takes it a step further and even have syntactic sugar just for incrementing/decrementing a variable (x++;, x--;, etc).

A great example in ES6+ is the class keyword.

💡 JavaScript uses the prototype to handle inheritance and other object-oriented programming concepts.

Using the class keyword is a much nicer and easier way of creating pseudo-classes in JavaScript, but it’s just a facade basically that makes working with the prototype easier – under the hood, it’s exactly as if you’d used the prototype directly.

Prior to ES6, JavaScript had no classes. To mimic a class, we often use a constructor function as shown in the following example:

function Animal(type) {
    this.type = type;
}

Animal.prototype.identify = function() {
    console.log(this.type);
}

var cat = new Animal('Cat');
cat.identify(); // Cat

In the example above, First, created the Animal as a constructor function that has a property name called type.

The identify() method is assigned to the prototype so that it can be shared by all instances of the Animal type.

Then, created a new instance of the Animal type using the new operator.

The cat object, hence, is an instance of the Animal and of Object through prototypal inheritance.

ES6 introduced a new syntax for creating a class as shown in this example.

class Animal {
    constructor(type) {
        this.type = type;
    }
    identify() {
        console.log(this.type);
    }
}

let cat = new Animal('Cat');
cat.identify();

In the example above, Animal class behaves like the Animal type in the previous example.

However, instead of using a constructor function, it uses the class keyword.

In the Animal class, the constructor() is where you can add the properties of an instance.

The identify() is the method of the Animal class. Note that you don’t need to use the function keyword to declare a method of the class.

The class declaration is just syntactic sugar of the constructor function, therefore, the result of the typeof operator of the Animal class is function.

Share this post