Understanding Polymorphism in JavaScript

Polymorphism is a fundamental concept in object-oriented programming (OOP) that allows objects of different classes to respond to the same method call in their own specific ways. JavaScript, being a dynamically typed language, implements polymorphism in a flexible manner. Here’s a breakdown of how polymorphism works in JavaScript:

What is Polymorphism?

The word “polymorphism” comes from Greek words meaning “many forms.” In programming, it means that one thing (like a function or a method) can take on many forms or have many different behaviors.

Why is Polymorphism Useful?

Polymorphism allows you to write more general and flexible code. Instead of writing separate code for each specific type of object, you can write code that works with a variety of objects.

How is Polymorphism Achieved in JavaScript?

Here are the primary ways polymorphism is achieved in JavaScript:

1. Subtype Polymorphism (Inheritance and Method Overriding)

This is the most common way to achieve polymorphism in JavaScript. It involves two key concepts:
- Inheritance: When you create a new class (subclass) based on an existing class (superclass), the subclass inherits the properties and methods of the superclass.
- Method Overriding: A subclass can provide its own implementation of a method that is already defined in its superclass. This allows the subclass to customize the behavior of the method.
Simpler Example:Let’s say we have a class called Shape with a method called draw().

class Shape {
  draw() {
    console.log("Drawing a shape");
  }
}

Now, we can create subclasses of Shape for specific shapes like Circle and Square.

class Circle extends Shape {
  draw() {
    console.log("Drawing a circle"); // Overrides the draw() method
  }
}

class Square extends Shape {
  draw() {
    console.log("Drawing a square"); // Overrides the draw() method
  }
}

In this example, the draw() method is polymorphic. When we call the draw() method on a Circle object, it behaves differently than when we call it on a Square object.

const myCircle = new Circle();
const mySquare = new Square();

myCircle.draw(); // Output: "Drawing a circle"
mySquare.draw(); // Output: "Drawing a square"

Even though we are calling the same method (draw()), the output is different depending on the type of object. This is polymorphism in action.

2. Duck Typing

JavaScript’s dynamic nature allows for a concept called “duck typing.”
Instead of checking the actual type or class of an object, we check if it has the properties and methods we need.
The name “duck typing” comes from the saying: “If it walks like a duck and quacks like a duck, then it must be a duck.”Simpler Example:Let’s say we have a function called makeSound() that expects an object with a makeSound() method.

function makeSound(obj) {
  if (typeof obj.makeSound === "function") {
    obj.makeSound();
  } else {
    console.log("This object can't make a sound");
  }
}

Now, we can pass any object to this function, as long as it has a makeSound() method.

const dog = {
  makeSound: function() {
    console.log("Woof!");
  }
};

const cat = {
  makeSound: function() {
    console.log("Meow!");
  }
};

const myCar = {
  honk: function() {
    console.log("Honk!");
  }
};

makeSound(dog); // Output: "Woof!"
makeSound(cat); // Output: "Meow!"
// makeSound(myCar);  // Error: myCar doesn't have makeSound()

In this example, the makeSound() function works with both the dog and cat objects because they both have a makeSound() method. It doesn’t care that one is a dog and the other is a cat. It would not work with myCar because it has a honk() method, not a makeSound() method.

Understanding Polymorphism in JavaScript