In this tutorial, you will find out about JavaScript classes with the assistance of examples.
In this article, you will learn-
Introduction
JavaScript uses prototypal inheritance: each object inherits properties and techniques from its prototype object.
The traditional class as the blueprint to make objects, used in languages like Java or Swift, doesn’t exist in JavaScript. The prototypal inheritance manages objects.
Classes are one of the highlights presented in the ES6 rendition of JavaScript.
A class is a blueprint for the object. You can make an object from the class.
You can consider the class a sketch (prototype) of a house. It contains all the insights concerning the floors, doors, windows, and so forth In light of these descriptions, you assemble the house. House is the object.
Since numerous houses can be produced using a similar description, we can make numerous objects from a class.
Creating JavaScript Class
JavaScript class is like the Javascript constructor function, and it is just syntactic sugar.
The constructor work is characterized as:
// constructor function function Person () { this.name = 'Salman', this.age = 23 } // create an object const person1 = new Person();
Rather than using the function watchword, you use the class catchphrase for making JS classes. For instance,
// creating a class class Person { constructor(name) { this.name = name; } }
The class watchword is used to make a class. The properties are assigned in a constructor work.
Presently you can make an object. For instance,
// creating a class class Person { constructor(name) { this.name = name; } } // creating an object const person1 = new Person('Salman'); const person2 = new Person('Sohail'); console.log(person1.name); // Salman console.log(person2.name); // Sohail
Here, person1 and person2 are objects of Person class.
Note: The constructor() strategy inside a class gets considered consequently each time an object is made.
Javascript Class Methods
While using constructor function, you define methods as:
// constructor function function Person (name) { // assigning parameter values to the calling object this.name = name; // defining method this.greet = function () { return ('Hello'' + ' ' + this.name); } }
It is not difficult to characterize strategies in JavaScript class. You basically give the name of the strategy followed by (). For instance,
class Person { constructor(name) { this.name = name; } // defining method greet() { console.log(`Hello ${this.name}`); } } let person1 = new Person('Salman'); // accessing property console.log(person1.name); // Salman // accessing method person1.greet(); // Hello Salman
Note: To get to the method for an object, you need to call the strategy using its name followed by ().
Getters and Setters
In JavaScript, getter techniques get the value of an object, and setter strategies set the value of an object.
JavaScript classes may incorporate getters and setters. You use the get watchword for getter strategies and set for setter techniques. For instance,
class Person { constructor(name) { this.name = name; } // getter get personName() { return this.name; } // setter set personName(x) { this.name = x; } } let person1 = new Person('Sohail'); console.log(person1.name); // Sohail // changing the value of name property person1.personName = 'Sara'; console.log(person1.name); // Sara
Hoisting
A class ought to be characterized before using it. Dissimilar to functions and other JavaScript assertions, the class isn’t hoisted. For instance,
// accessing class const p = new Person(); // ReferenceError // defining class class Person { constructor(name) { this.name = name; } }
As you can see, accessing a class before defining it throws an error.
‘use strict’
Classes consistently follow ‘use strict’. All the code inside the class is consequently in strict mode. For instance,
class Person { constructor() { a = 0; this.name = a; } } let p = new Person(); // ReferenceError: Can't find variable: a
Note: JavaScript class is a special type of function. And the typeof operator returns function for a class.
For example,
class Person {} console.log(typeof Person); // function
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.