Facade Design Pattern
Structural: Facade Pattern
Could you please explain the facade design pattern?
View Answer:
Interview Response: The Façade design pattern creates an interface that protects clients from complex functionality in one or more sub-systems. It's a simple pattern that may appear insignificant, but it's powerful and advantageous. We commonly find it in systems based on a multi-layer architecture.
Code Example #1:
let orderNumber = 0;
// Facade
class PlaceFoodOrder {
placeOrder(orderDetails) {
const orderId = PlaceFoodOrder.generateId();
let chef;
if (orderDetails.foodType === 'Main Course') {
chef = new MainCourseChef();
} else if (orderDetails.foodType == 'Dessert') {
chef = new DessertChef();
}
return chef.addFoodOrder({ orderId, orderDetails });
}
static generateId() {
return ++orderNumber;
}
}
// Sub Systems
class FoodOrders {
constructor() {
this.orders = [];
}
addFoodOrder(order) {
this.orders.push(order);
return this.conveyOrder(order);
}
timetoMakeOrder() {}
conveyOrder(order) {}
}
class MainCourseChef extends FoodOrders {
constructor() {
super();
this.assigned = true;
return this;
}
timetoMakeOrder() {
return Math.floor(Math.random() * 50) + 10;
}
conveyOrder({ orderId, orderDetails }) {
const time = this.timetoMakeOrder();
console.log(
`Order number ${orderId}: ${orderDetails.foodDetails} will be served in ${time} minutes.`
);
}
}
class DessertChef extends FoodOrders {
constructor() {
super();
this.assigned = true;
return this;
}
timetoMakeOrder() {
return Math.floor(Math.random() * 30) + 10;
}
conveyOrder({ orderId, orderDetails }) {
const time = this.timetoMakeOrder();
console.log(
`Order number ${orderId}: ${orderDetails.foodDetails} will be served in ${time} minutes.`
);
}
}
const customer = new PlaceFoodOrder();
const order1 = customer.placeOrder({
foodType: 'Main Course',
foodDetails: 'Pasta with Shrimps',
});
const order2 = customer.placeOrder({
foodType: 'Dessert',
foodDetails: 'Molten Lava Cake',
});
/*
output:
Order number 1: Pasta with Shrimps will be served in 40 minutes.
Order number 2: Molten Lava Cake will be served in 34 minutes.
*/
Code Example #2:


The objects participating in this pattern are:
Façade -- Example code: Mortgage
- knows which sub-systems are responsible for a request
- Client requests are routed to the appropriate sub-system objects.
Sub Systems -- Example code: Bank, Credit, Background
- carries out and implements specialized sub-system functionality
- have no knowledge of or connection to the façade
let Mortgage = function (name) {
this.name = name;
};
Mortgage.prototype = {
applyFor: function (amount) {
// access multiple subsystems...
let result = 'approved';
if (!new Bank().verify(this.name, amount)) {
result = 'denied';
} else if (!new Credit().get(this.name)) {
result = 'denied';
} else if (!new Background().check(this.name)) {
result = 'denied';
}
return this.name + ' has been ' + result + ' for a ' + amount + ' mortgage';
},
};
let Bank = function () {
this.verify = function (name, amount) {
// complex logic ...
return true;
};
};
let Credit = function () {
this.get = function (name) {
// complex logic ...
return true;
};
};
let Background = function () {
this.check = function (name) {
// complex logic ...
return true;
};
};
function run() {
let mortgage = new Mortgage('Joan Templeton');
let result = mortgage.applyFor('$100,000');
console.log(result);
}
run();
/*
OUTPUT:
Joan Templeton has been approved for a $100,000 mortgage
*/
The Facade pattern belongs to which pattern family?
View Answer:
Interview Response: The Facade pattern is a type of structural design pattern.
When should you employ the Façade Pattern?
View Answer:
Interview Response: The facade pattern makes it easier for a client to interact with a system. As a result, it gets used when an application's underlying code is large and complex, and the client does not need to see it.
It gets used in communicating with methods in a library without understanding what is happening behind the scenes. JavaScript libraries, such as jQuery, are an example.
It gets used in communicating with methods in a library without understanding what is happening behind the scenes. JavaScript libraries, such as jQuery, are an example.
Can you elaborate on the Façade Pattern's object participants?
View Answer:
Interview Response: There are two types of objects represented in the Façade Pattern. They consist of the Façade and the Sub Systems (There can be multiple sub-system objects in this pattern).
- Facade – The Façade understands which sub-systems are in charge of a request and routes client requests to the appropriate sub-system objects.
- Sub Systems – A sub-system implements and executes specialized sub-system activities, but it has no cohesive knowledge or connection to the Façade itself.
What are some of the benefits of using the Facade pattern?
View Answer:
Interview Response: You can isolate your code from the complexity of a sub-system.
What are some of the disadvantages of employing the Facade pattern?
View Answer:
Interview Response: A façade can be a god object tightly linked to all classes in an app.