Skip to main content

Adapter Pattern in JavaScript (Live Playground)

The Adapter pattern is a structural design pattern that allows objects with incompatible interfaces to work together by wrapping one object with an adapter that implements the expected interface. In this tutorial, we'll explore the Adapter pattern in JavaScript, including its use cases, implementation, and benefits.

Why Use the Adapter Pattern?​

The Adapter pattern is useful when you want to:

  1. Make existing classes work with others without modifying their source code.
  2. Create reusable code that works with classes that don't share a common interface.
  3. Provide a consistent interface for interacting with different objects.

Implementing the Adapter Pattern in JavaScript​

Here's an example of how to implement the Adapter pattern using JavaScript classes:

TypeScript
// Incompatible interface
class OldCalculator {
  constructor() {
    this.operations = (term1, term2, operation) => {
      switch (operation) {
        case 'add':
          return term1 + term2;
        case 'sub':
          return term1 - term2;
        default:
          return NaN;
      }
    };
  }
}

// New interface
class NewCalculator {
  add(term1, term2) {
    return term1 + term2;
  }

  sub(term1, term2) {
    return term1 - term2;
  }
}

// Adapter
class CalculatorAdapter {
  constructor() {
    this.newCalc = new NewCalculator();
  }

  operations(term1, term2, operation) {
    switch (operation) {
      case 'add':
        return this.newCalc.add(term1, term2);
      case 'sub':
        return this.newCalc.sub(term1, term2);
      default:
        return NaN;
    }
  }
}

const calcAdapter = new CalculatorAdapter();
console.log(calcAdapter.operations(3, 2, 'add')); // Output: 5
console.log(calcAdapter.operations(3, 2, 'sub')); // Output: 1

In this example, the OldCalculator class has an operations() method with an incompatible interface. The NewCalculator class provides the same functionality with a more modern interface. The CalculatorAdapter class wraps the NewCalculator instance and provides an operations() method that matches the OldCalculator interface, allowing the client code to work with both classes seamlessly.

Live Playground, Try it Yourself

Benefits of the Adapter Pattern​

Implementing the Adapter pattern in your JavaScript projects offers several benefits:

  1. Flexibility: The Adapter pattern allows you to create flexible and reusable code that can work with different objects and interfaces.
  2. Compatibility: The Adapter pattern enables you to make existing classes work with others without modifying their source code, promoting code reusability and reducing the need for major refactoring.
  3. Consistency: The Adapter pattern provides a consistent interface for interacting with different objects, making your code more maintainable and easier to understand.

Conclusion​

In summary, the Adapter pattern is a valuable tool in JavaScript development that can help you create flexible, maintainable, and compatible code. By understanding and implementing this pattern, you can enhance your web development skills and create more robust applications.