It's #FrontendFriday - Adapter pattern

What is the adapter pattern?

When using libraries, it often happens that methods or interfaces need to be updated. The user is then faced with a choice. Either he continues to use the outdated library or he adapts his methods.

As libraries are not normally updated without reason, the choice should not be difficult. However, there are usually several code sections that need to be adapted. To avoid having to adapt each interface individually, the adapter pattern can be used.

The adapter design pattern falls under the category of structural design patterns and can be used to adapt interfaces. Externally, the adapter component offers the same methods, but internally the methods of the client are mapped to the new method.

The adapter pattern serves as a link between the client and the adapter (e.g. a library).

[3]

 

The advantage of using the adapter design pattern is that only the adapter needs to be adapted if something changes in the adapter.

A colleague said to me: "It's like when I travel to another country. I don't have to buy a new charger, I can take my old charger with me. I just need an adapter so that I can still get power for my cell phone." I think this example sums it up very well. 

Code-Example

What does the adapter pattern in Javascript look like? Here is an example:

// old interface
class OldCoffeeMachine {
    constructor() {
      this.typeOfCoffees = function (size, typeOfCoffee) {
        switch (typeOfCoffee) {
          case 'Coffee':
            return size + 'Coffee'
          case 'Cappuccino':
            return size + 'Cappuccino'
          default:
            return null
        }
      }
    }
  }
  
  // new interface
  class NewCoffeeMachine {
    constructor() {
      this.coffee = function (size) {
        return size + 'Coffee'
      }
      this.cappuccino = function (size) {
        return size + 'Cappuccino'
      }
    }
  }


  // Adapter Class
class CoffeeAdapter {
    constructor() {
      const newCoffee = new NewCoffeeMachine()
  
      this.typeOfCoffees = function (size, typeOfCoffee) {
        switch (typeOfCoffee) {
          case 'Coffee':
            // using the new implementation under the hood
            return newCoffee.coffee(size)
          case 'Cappuccino':
            return newCoffee.cappuccino(size)
          default:
            return null
        }
      }
    }
  }
  
  // usage
  const oldCoffeeMachine = new OldCoffeeMachine()
  console.log(oldCoffeeMachine.typeOfCoffees('big', 'Coffee')) // 'big Coffee'
  
  const newCoffeeMachine = new NewCoffeeMachine()
  console.log(newCoffeeMachine.coffee('big')) // 'big Coffee'
  
  const adaptedCoffeeMachine = new CoffeeAdapter()
  console.log(adaptedCoffeeMachine.typeOfCoffees('big', 'Coffee')) // 'big Coffee'

In the example above, there is an old interface that requires 2 parameters (size and type of coffee) to output a corresponding coffee.

The new interface only requires the 'size' parameter and then offers the corresponding method for the type of coffee.

The adapter class now makes it possible to continue using the old methods with 2 parameters. However, the methods of the new interface are used within the class. 

Relevance in JavaScript

JavaScript is very dynamic and can often be easily adapted at runtime. However, the user must ensure that they do not cause any unwanted side effects. With increasing complexity, the use of the adapter pattern makes perfect sense.¹ 

The Webfrontend-FG wishes everyone a nice weekend!

Learn more about Java programming

Learn more about frontend development