JavaScript OOPs Classes

JavaScript Classes provide a way to create objects and implement inheritance in a more structured and readable manner. Classes are a blueprint for creating objects with shared properties and methods, making it easier to organize code and implement Object-Oriented Programming (OOP) principles.

Key Features of JavaScript Classes:

• Classes allow the creation of objects with common methods and properties.
• JavaScript classes are syntactic sugar over JavaScript's prototype-based inheritance.
• Classes support constructors, methods, and inheritance, which are key concepts in OOP.

Basic Syntax of JavaScript Class

A JavaScript class is defined using the class keyword. Inside the class, you can define a constructor and methods:

class MyClass 
{
 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.");
    }
}                
                        

Example: Defining and Using a Class

The following example defines a simple class called Person and creates an instance of it:

<script type="text/javascript">
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.");
    }
}
            
let person1 = new Person("Alice", 30);
person1.greet();  // Output: Hello, my name is Alice and I am 30 years old.
</script>

Explanation of Code:

• The class Person has a constructor that initializes the name and age properties.
• The greet() method displays a greeting message using the object's properties.
• An instance of the class is created using the new keyword: let person1 = new Person("Alice", 30);
• When the greet() method is called on the instance, it outputs a message to the console.

Inheritance in JavaScript Classes

In JavaScript, one class can inherit properties and methods from another class using the extends keyword. This allows us to create a class hierarchy and reuse code efficiently.

Example: Inheritance in JavaScript Classes

<script type="text/javascript">
class Animal 
{
    constructor(name)
    {
        this.name = name;
    }
            
    speak() 
    {
    console.log(this.name + " makes a sound.");
    }
}
            
class Dog extends Animal 
{
    constructor(name, breed) 
    {
       super(name);  // Call the parent class's constructor
       this.breed = breed;
    }
            
    speak() 
    {
        console.log(this.name + " barks.");
    }
}
            
let dog1 = new Dog("Max", "Golden Retriever");
    dog1.speak();  // Output: Max barks.
</script>

Explanation of Code:

• The Animal class has a constructor that initializes the name property and a speak() method that prints a general message.
• The Dog class extends the Animal class and adds a new property, breed.
• The speak() method is overridden in the Dog class to print a message specific to dogs.
• Using the super() keyword, the Dog class calls the parent class's constructor to initialize the name property.
• When the speak() method is called on the dog1 instance, it outputs a dog-specific message.

Static Methods in JavaScript Classes

Static methods are methods that are called on the class itself, not on instances of the class. They are defined using the static keyword.

Example: Static Method in JavaScript Class

<script type="text/javascript">
class MathUtility
{
    static add(a, b) 
    {
     return a + b;
    }
            
    static multiply(a, b) 
    {
     return a * b;
    }
}
            
console.log(MathUtility.add(5, 3));  
console.log(MathUtility.multiply(5, 3));  
</script>

Explanation of Code:

• The class MathUtility defines two static methods: add() and multiply().
• Static methods are called on the class itself, not on instances. For example,MathUtility.add(5, 3).
• The methods perform arithmetic operations and return the result, which is then logged to the console.