Classes in JavaScript

Classes are introduced in ES6 version of Javascript. A class is a blueprint for the object. You can create as many as objects from the a class.

Syntax:

class Fname {
  constructor(name) {
    this.name = name;
  }
}

• The properties are assigned in a constructor function. The constructor() method inside a class gets called automatically each time an object is created.

Example:

class Fname {
  constructor(name) {
    this.name = name;
  }
}

const student1 = new Fname("Shubham");
const student2 = new Fname("Ashok");

console.log(student1); // output: Fname { name: 'Shubham' }
//means student1 & student2 are objects of class Fname
console.log(student2.name); //output:  Ashok

Hoisting

A class should be defined before using it. Unlike functions and other JavaScript declarations, the class is not hoisted. Accessing a class before declaration gives error.

const student1 = new Fname("Shubham"); // ReferenceError: Fname is not defined
class Fname {
  constructor(name) {
    this.name = name;
  }
}

Class Methods in Javascript

class Fname {
  constructor(name) {
    this.name = name;
  }
 // defining methods
  info() {
    console.log(`Your first name is: ${this.name}`);
  }
}

const student1 = new Fname("Shubham");
student1.info(); //output:-  Your first name is: Shubham

Getters and Setters

In JavaScript, getter methods get the value of an object and setter methods set the value of an object. get keyword for getter methods and set for setter methods.

class Fname {
    constructor(name) {
        this.name = name;
    }
    // getter
    get firstName() {
        return this.name;
    }
    // setter
    set firstName(value) {
        this.name = value;
    }
}

let student1 = new Fname('Shubham');
console.log(student1.name); //output: Shubham

student1.firstName = 'Ashok'; // changing value of name property
console.log(student1.name); //output:  Ashok

Class Inheritance in Javascript

Using class inheritance, a child class can inherit all the methods and properties of parent class. Inheritance is a useful feature that allows code reusability. The super keyword used inside a child class denotes its parent class

To use class inheritance, you use the extends keyword.

// parent class
class Fname {
  constructor(name) {
    this.name = name;
  }
  info() {
    console.log(`Your first name is: ${this.name}`);
  }
}

// child class
class Person extends Fname{

}

const student1 = new Person("Shubham");
student1.info(); //output:-  Your first name is: Shubham

Method overriding

If a child class has the same method or property as that of the parent class, it will use the method and property of the child class.

class Fname { 
    constructor(name) {
        this.name = name;
        this.location = "Delhi";
    }
    info() {
        console.log(`Your First name is: ${this.name}.`);
    }
}

class Person extends Fname {
    constructor(name) {
        // call the super class constructor and pass in the name parameter
        super(name);
        this.location = 'New-Delhi';
    }
    info() {
        console.log(`Your name is: ${this.name}.`);
        console.log('Your location is: ' + this.location);
    }
}

let student1 = new Person('Shubham');
student1.info();
/*
Output:-
 Your name is: Shubham.
 Your location is: New-Delhi
*/

References:

• programbiz

Thumbnail designed using CANVA

Thanks for Reading ! Happy Learning