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 add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
$this Keyword in PHPPHPWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousAND, OR and NOT boolean operators in Envision BasicEnvision Basictransform-origin Property in CSSCSSWordPress: How to print ACF repeater field values?WordPressAngular: Templates, directives, data binding, Services and dependency injectionAngular