Flat Preloader Icon

JS Class

In JavaScript, classes are a way to create objects with a blueprint for their structure and behavior. They provide a more convenient and familiar syntax for implementing object-oriented programming (OOP) concepts like inheritance, encapsulation, and polymorphism.

Syntax:

				
					class ClassName {
    constructor(/* constructor parameters */) 
    {
        // constructor logic
    }

    method1(/* method1 parameters */) {
        // method1 logic
    }

    method2(/* method2 parameters */) {
        // method2 logic
    }

    // Additional methods and properties
}

				
			

Components:

  • Constructor:

    • The constructor method is a special method used for initializing newly created objects. It’s automatically called when a new instance of the class is created.
  • Methods:

    • Methods are functions defined within the class that define the behavior of its instances. They can access and modify the object’s properties using the this keyword.
  • Properties:

    • Properties are variables or data fields associated with each instance of the class. They are defined within the constructor or directly within the class body.

Example Usage:

				
					class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is 
    ${this.name} and I am ${this.age} years old.`);
    }
}

// Creating instances of the Person class
let person1 = new Person("Alice", 30);
let person2 = new Person("Bob", 25);

// Accessing properties and calling methods
console.log(person1.name); 
// Output: Alice
person2.greet(); 
// Output: Hello, my name is Bob and I am 25 years old.

				
			

Inheritance:

  • JavaScript classes support inheritance, allowing you to create subclasses that inherit properties and methods from a parent class using the extends keyword

				
					class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        // Call the parent class constructor
        this.grade = grade;
    }

    study() {
        console.log(`${this.name} is studying.`);
    }
}

let student = new Student("Carol", 20, "A");
student.greet(); 
// Output: Hello, 
my name is Carol and I am 20 years old.
student.study();
// Output: Carol is studying.

				
			

Static Methods:

  • Static methods are methods that are called on the class itself, rather than on instances of the class. They are defined using the static keyword.
				
					class MathUtils {
    static add(x, y) {
        return x + y;
    }
}

console.log(MathUtils.add(5, 3)); 
// Output: 8

				
			

Getters and Setters:

  • Getters and setters are special methods used to define computed properties and control access to object properties. They are defined using the get and set keywords
				
					class Circle {
    constructor(radius) {
        this.radius = radius;
    }

    get area() {
        return Math.PI * this.radius ** 2;
    }

    set diameter(diameter) {
        this.radius = diameter / 2;
    }
}

let circle = new Circle(5);
console.log(circle.area);
// Output: 78.53981633974483
circle.diameter = 10;
console.log(circle.radius); 
// Output: 5