Introduction to the Adapter Pattern Using JavaScript

Welcome to our journey through Structural Patterns! Structural Patterns help manage object compositions and relationships, aiding in the creation of more scalable and flexible systems. One foundational structural pattern is the Adapter Pattern, which focuses on enabling two incompatible interfaces to work together seamlessly. Imagine you have a European plug that you need to use with a U.S. socket. They are inherently incompatible, but through an adapter, you can bridge this gap. Similarly, in software design, you often encounter situations where you need to integrate classes with incompatible interfaces. The Adapter Pattern provides a way to achieve this integration.

The key components of the Adapter Pattern include the Target Interface, the Adaptee, and the Adapter. The Target Interface is the interface expected by the client. In our example, this would be USPlug. The Adaptee is the existing interface that needs adapting, which in our case, is EuropeanPlug. The Adapter is the class that bridges the gap between the Target Interface and the Adaptee.

We start by defining the Adaptee, which in our case is the European plug. Here’s the initial code for the EuropeanPlug class:

class EuropeanPlug {
    connect() {
        console.log("European plug connected.");
    }
}

The EuropeanPlug class has a connect method that logs a string indicating that the plug is connected. This is the starting point of our implementation.

In JavaScript, interfaces are not explicitly defined as they are in some languages, but we can mimic this by outlining the expected methods in comments or using an ES6 class:

class USPlug {
    connect() {
        throw new Error('You must implement the connect method');
    }
}

The USPlug class provides a method stub for connect. This establishes the interface expected by the client.

Now, we need to create the Adapter that will bridge the EuropeanPlug with the USPlug interface. Here’s how we define the Adapter class:

class Adapter extends USPlug {
    constructor(europeanPlug) {
        super();
        this.europeanPlug = europeanPlug;
    }
    
    connect() {
        this.europeanPlug.connect();
    }
}

The Adapter class extends USPlug, ensuring it meets the interface requirements by implementing the connect method. The constructor accepts an instance of EuropeanPlug and uses it to fulfill the connect functionality.