Adapter Design Pattern
Structural: Adapter Pattern
Could you please explain the adapter design pattern?
View Answer:
Interview Response: In JavaScript, the adapter design pattern allows objects or classes with incompatible interfaces to work together. Interfaces from different classes or objects connect through an adapter work together despite their incompatible interfaces. The wrapper pattern is another name for it.
Diagram:


The objects participating in this pattern are:
Client -- In example code: the run() function
- alls into Adapter to request a service
Adapter -- In example code: ShippingAdapter
- implements the interface that the client expects or knows
Adaptee -- In example code: AdvancedShipping
- the object being adapted
- has a different interface from what the client expects or knows
Code Example #1:
class SimpleEarphones {
constructor() {
this.attach = function () {
console.log('Use Earphones with Type C phone');
};
}
}
// Adapter
class EarPhoneAdapter extends SimpleEarphones {
constructor(typeCphone) {
super();
this.attach = function () {
typeCphone.attach();
};
}
}
class TypeCPhone {
constructor() {
this.attach = function () {
console.log('Earphones attached to Type C phone');
};
}
}
let typeCphone = new TypeCPhone();
let adapter = new EarPhoneAdapter(typeCphone);
adapter.attach();
/*
Output:
Earphones attached to Type C phone
*/
Code Example #2: ES5 Classical Implementation


// old interface
function Shipping() {
this.request = function (zipStart, zipEnd, weight) {
// ...
return '$49.75';
};
}
// new interface
function AdvancedShipping() {
this.login = function (credentials) {
/* ... */
};
this.setStart = function (start) {
/* ... */
};
this.setDestination = function (destination) {
/* ... */
};
this.calculate = function (weight) {
return '$39.50';
};
}
// adapter interface
function ShippingAdapter(credentials) {
var shipping = new AdvancedShipping();
shipping.login(credentials);
return {
request: function (zipStart, zipEnd, weight) {
shipping.setStart(zipStart);
shipping.setDestination(zipEnd);
return shipping.calculate(weight);
},
};
}
function run() {
var shipping = new Shipping();
var credentials = { token: '30a8-6ee1' };
var adapter = new ShippingAdapter(credentials);
// original shipping object and interface
var cost = shipping.request('78701', '10010', '2 lbs');
console.log('Old cost: ' + cost);
// new shipping object with adapted interface
cost = adapter.request('78701', '10010', '2 lbs');
console.log('New cost: ' + cost);
}
run();
/*
OUTPUT:
Old cost: $49.75
New cost: $39.50
*/
The Adapter pattern belongs to which pattern category?
View Answer:
Interview Response: The Adapter pattern is a type of structural design pattern.
What is the Adapter Pattern's most noticeable feature?
View Answer:
Interview Response: The main characteristic of the Adapter Pattern is the adapter interface required to intersect with interfaces that are not compatible.
What Pros and Cons can you think of regarding the Adapter Pattern?
View Answer:
Interview Response: Benefits vs. Drawbacks
Benefits
- Based on SOLID principles.
- We can add new adapters without breaking existing code.
- The code is both reusable and adaptable.
- Clean code — because the client/context does not use a different interface in each concrete class and can switch between additional adapters using polymorphism.
- Single Responsibility Principle - The principle of single responsibility. You can separate the interface or data conversion code from the main business logic of the program.
- Open/Closed Principle. If they interact with the adapters via the client interface, you can start introducing new kinds of adapters into the application without having to break the existing client code.
Drawbacks
- The overall complexity of the code rises as a result of the addition of new interfaces and classes. Changing the service class to match the rest of your code is sometimes easier.
When should the Adapter Pattern be used?
View Answer:
Interview Response: Use Case
- There is a class whose interfaces do not match the one you need.
- There are several subclasses, but it’s impractical to adapt their interface by sub-classing every one.