What is Polymorphism?

Part of the Object Oriented Programming section of Coddy's JavaScript journey — lesson 35 of 56.

Polymorphism is a core principle of object-oriented programming that allows objects of different classes to respond to the same method in different ways.

In JavaScript, polymorphism is most commonly seen when child classes override methods from parent classes.

Let's create a simple parent class with a speak() method:

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a sound`;
  }
}

Now, let's create a child class that extends Animal:

class Dog extends Animal {
  speak() {
    return `${this.name} barks`;
  }
}

Here's another child class:

class Cat extends Animal {
  speak() {
    return `${this.name} meows`;
  }
}

Each child class implements the speak() method differently. This is polymorphism in action!

We can now create different objects and call the same method on each:

const animal = new Animal("Some animal");
const dog = new Dog("Rex");
const cat = new Cat("Whiskers");

console.log(animal.speak()); // Some animal makes a sound
console.log(dog.speak());    // Rex barks
console.log(cat.speak());    // Whiskers meows

All three objects respond to the speak() method, but each does so in its own way.

Challenge

You have a notification system with a parent class Notification and two child classes. Your task is to add the send(message) method to each child class with different implementations.

In the EmailNotification class, the method should return the string: "Sending '(message)' via Email"
In the SMSNotification class, the method should return the string: "Sending '(message)' via SMS"

Cheat sheet

Polymorphism allows objects of different classes to respond to the same method in different ways. In JavaScript, this is commonly achieved when child classes override methods from parent classes.

Create a parent class with a method:

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a sound`;
  }
}

Child classes can override the parent method with their own implementation:

class Dog extends Animal {
  speak() {
    return `${this.name} barks`;
  }
}

class Cat extends Animal {
  speak() {
    return `${this.name} meows`;
  }
}

Each object responds to the same method differently:

const animal = new Animal("Some animal");
const dog = new Dog("Rex");
const cat = new Cat("Whiskers");

console.log(animal.speak()); // Some animal makes a sound
console.log(dog.speak());    // Rex barks
console.log(cat.speak());    // Whiskers meows

Try it yourself

import { EmailNotification } from './email-notification.js';
import { SMSNotification } from './sms-notification.js';

// Test code - don't modify
const email = new EmailNotification();
const sms = new SMSNotification();

console.log(email.send("Hello!"));  // Should use EmailNotification's send()
console.log(sms.send("Hello!"));    // Should use SMSNotification's send()