Yogesh Chauhan's Blog

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

in JavaScript on 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.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to convert a function component into a class in React?ReactHow to read Standard Input in Swift?SwiftHow to remove WordPress TinyMCE Editor buttons?WordPressDebugging in WordPress Part 2: WP_DEBUG_LOG and WP_DEBUG_DISPLAYWordPressHow to insert Bootstrap 4 in Angular 9 app?AngularHow to control file extensions with an .htaccess file?Miscellaneous