Polymorphism in JavaScript

Polymorphism is a core concept in object-oriented programming (OOP) that allows objects to be treated as instances of their parent class, but with the ability to take many forms. In simple terms, polymorphism allows you to call the same method on different objects, and each object responds in its own way.

What is Polymorphism in JavaScript?

Polymorphism is one of the 4 pillars of object-oriented programming languages where poly means many and morphism means transforming one form into another. Polymorphism means the same function with different signatures is called many times. It allows methods to do different things based on the object it is acting upon.

In JavaScript, polymorphism works in two primary ways:

• Method Overriding: A child class overrides a method of its parent class.
• Method Overloading (simulated): A function behaves differently based on the number or type of its arguments.

Method Overriding

Method overriding occurs when a subclass provides its own specific implementation of a method that is already defined in its parent class. When you call this method, JavaScript will use the subclass's implementation instead of the parent's, which is a runtime decision.

class Animal {
    speak() {
        console.log("Animal makes a sound");
    }
}

class Dog extends Animal {
    speak() {
        console.log("Dog barks");
    }
}

class Cat extends Animal {
    speak() {
        console.log("Cat meows");
    }
}

const dog = new Dog();
dog.speak(); 

const cat = new Cat();
cat.speak();  

Dog barks
Cat meows

In this example

• Dog and Cat override the speak() method defined in the Animal class.
• Even though all of them are instances of Animal, each class provides its own behavior for the speak() method.
• This is an example of runtime polymorphism because JavaScript determines at runtime which method to call based on the object's type.

Method Overloading (Compile-time Polymorphism)

JavaScript does not natively support method overloading, where multiple methods with the same name but different arguments exist in the same scope. However, method overloading can be simulated by checking the number or type of arguments passed to a function, and executing different logic based on them.

class Calculator {
    add(a, b) {
        if (b === undefined) {
            return a + a; 
        }
        return a + b; 
    }
}

const calc = new Calculator();
console.log(calc.add(2)); 
console.log(calc.add(2, 3));

4
5

In this example

• The add() method behaves differently based on the number of arguments provided.
• If only one argument is passed, it doubles the value; if two arguments are passed, it adds them.

Note- While JavaScript doesn’t natively support method overloading with function signatures (as in Java or C++), we can still achieve similar functionality through manual argument checking.

Polymorphism with Functions and Objects

It is also possible in JavaScript that we can make functions and objects with polymorphism.

class A {
    area(x, y) {
        console.log(x * y);
    }
}
class B extends A {
    area(a, b) {
        super.area(a, b);
        console.log('Class B')
    }
}

let ob = new B();
let output = ob.area(100, 200);

20000
Class B

Benefits of using Polymorphism

• Code reusability: Polymorphism allows us to reuse the code. This saves the time of the developers from writing the code again and again.
• Easy Integration and Extension: Polymorphism allows us to extend the functionality of code and add the new classes easily.
• Simplified Code Maintenance: Polymorphism allows us to change the code when new objects are added in the system. We can add new subclasses and the existing polymorphic methods will continue to work without modification.

Use Cases of Polymorphism

• UI Components: Different types of UI elements like buttons, text fields, and checkboxes can have unique behaviors but have common interfaces.
• Database Operations: Methods for different database types can share a common interface while implementing specific logic.
• File Handling: Implementing the different behaviors but using the same method for reading, writing, and parsing different file formats.
• API Responses: Function can be used for handling the different types of API responses.

neeraj3304

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• javascript-oop
• JavaScript-Questions