JavaScript Design Patterns - Structural - Adapter

The adapter pattern allows classes to work together, creating a class interface into another one.

In this example, we use a SoldierAdapter to use the legacy method attack() in our current system and can support the new version of Soldiers SuperSoldiers.

class Soldier {
  constructor(level) {
    this.level = level;
  }

  attack() {
    return this.level * 1;
  }
}

class SuperSoldier {
  constructor(level) {
    this.level = level;
  }

  attackWithShield() {
    return this.level * 10;
  }
}

class SoldierAdapter {
  constructor(superSoldier) {
    this.superSoldier = superSoldier;
  }

  attack() {
    return this.superSoldier.attackWithShield();
  }
}

export { Soldier, SuperSoldier, SoldierAdapter };

🚀 Applicability:

➖ Use the Adapter class when we want to use some existing class, but its interface is not compatible with the rest of our code.

The Adapter pattern lets us create a middle-layer class that serves as a translator between our code and a legacy class, a 3rd-party class, or any other class with a weird interface.

➖ Use the pattern when we want to reuse several existing subclasses that lack some common functionality that can not be added to the superclass.

We could extend each subclass and put the missing functionality into new child classes. However, we will need to duplicate the code across all of these new classes, which smells really bad.

---

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/
• Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs