JavaScript Classes

In this tutorial, you will find out about JavaScript classes with the assistance of examples.

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.

JS ES6