Inheritance & polymorphism: Organise code better Javascript

Inheritance & polymorphism are two key principles in object-oriented programming that can help to improve code organization in JavaScript.

Inheritance & polymorphism

Inheritance is the mechanism by which a new object is created from an existing object. In JavaScript, this is achieved through the use of prototypes. By creating a prototype object, you can define a set of properties and methods that can be shared by all objects created from that prototype. This can help to reduce code duplication and make your code more modular and reusable.

Polymorphism, on the other hand, is the ability of an object to take on many forms. In JavaScript, this can be achieved through the use of interfaces or abstract classes. By defining a common interface for a group of related objects, you can write code that can work with any of those objects, without needing to know the specific details of each one.

Lets understand how inheritance and polymorphism can improve code organization in JavaScript with an example

Let’s say we’re building a simple video game where we have different types of characters, such as wizards, warriors, and archers. Each character has a name, a health level, and a set of actions they can perform, such as attack, defend, or use a special ability.

Instead of creating separate classes for each type of character, we can use inheritance to create a base “Character” class that contains the common properties and methods shared by all characters. Each specific type of character can then inherit from this base class and add their own unique properties and methods.

Here’s an inheritance example:

class Character {
  constructor(name, health) {
    this.name = name;
    this.health = health;
  }

  attack(target) {
    console.log(`${this.name} attacks ${target.name}`);
  }

  defend() {
    console.log(`${this.name} defends`);
  }
}

class Wizard extends Character {
  constructor(name, health, spell) {
    super(name, health);
    this.spell = spell;
  }

  castSpell(target) {
    console.log(`${this.name} casts ${this.spell} at ${target.name}`);
  }
}

class Warrior extends Character {
  constructor(name, health, weapon) {
    super(name, health);
    this.weapon = weapon;
  }

  attack(target) {
    console.log(`${this.name} swings ${this.weapon} at ${target.name}`);
  }
}

class Archer extends Character {
  constructor(name, health, arrows) {
    super(name, health);
    this.arrows = arrows;
  }

  shootArrow(target) {
    console.log(`${this.name} shoots an arrow at ${target.name}`);
  }
}

Here, the base Character class defines the common properties and methods shared by all characters, such as name, health, and attack() and defend() methods.

The Wizard, Warrior, and Archer classes then inherit from the Character class and add their own unique properties and methods, such as the spell, weapon, and arrows properties, and the castSpell(), attack(), and shootArrow() methods.

This depicts of how inheritance can help us to create a more modular and reusable codebase by reducing code duplication and making it easier to add new types of characters in the future.

Now let’s say we want to write a function that takes a Character object as an argument and calls the attack() method on it. We can use polymorphism to write this function in a way that works with any type of Character, without needing to know the specific details of each one.

Here’s an polymorphism example:

function performAction(character) {
  character.attack();
}

Here, we define a simple performAction() function that takes a Character object as an argument and calls its attack() method. This function can be called with any type of Character object, whether it’s a Wizard, Warrior, or Archer, and it will work the same way for all of them.

This shows how polymorphism can help us to write more flexible and maintainable code that can work with different types of objects without needing to know the specific details of each one.

Conclusion

Together, inheritance and polymorphism can be used to create a more flexible and modular code structure in JavaScript. By organizing your code around a set of shared prototypes and interfaces, you can create a more consistent and maintainable codebase, and make it easier to add new functionality or modify existing code without introducing bugs or breaking existing code. Hope you enjoyed reading. 🙂