YogeshChauhan.com
How JavaScript classes allows us to do less typing (syntactic sugar)?
November 16, 2020

📌 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.

Sources

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

WordPress: How to access first and random row values from a repeater field in ACF?WordPressHow to create a new HTML element programmatically using JavaScript?HTMLHow to Install PHP Laravel in MacOS Catalina?PHPLearn how to use Self JOIN in SQL and MySQLSQL/MySQLThe simple difference between var, let and const in JavascriptJavaScriptHow to check if checkbox is checked or not using JavaScript?JavaScript