YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Function Scope in JavaScript for BeginnersJavaScriptHow to create a simple text and image slider using CSS and JavaScript?CSSHow to select multiple values in React dropdown?ReactHow to get query string values in JavaScript? (URL Manipulation using URLSearchParams)JavaScriptCheck if mixin is being called in a style rule or not in SCSSSCSSSocial Media Colors: Sass VariablesMisc