> For the complete documentation index, see [llms.txt](https://javascript-1.gitbook.io/design-pattern/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascript-1.gitbook.io/design-pattern/structural-design-patterns/facade.md).

# Facade

A single class that represents an entire subsystem.

* Facade pattern hides the complexities of the system and provides an interface to the client using which the client can access the system
* This pattern involves a single class which provides simplified methods required by client and delegates calls to methods of existing system classes.
* Most frequently used in JavaScript.

```javascript
EX:
interface Shape {
   draw(): void;
}

public class Rectangle implements Shape {
   draw() {
      console.log("Rectangle::draw()");
   }
}

public class Square implements Shape {
   draw() {
      console.log("Square::draw()");
   }
}

public class Circle implements Shape {
   draw() {
      console.log("Circle::draw()");
   }
}

class ShapeMaker {
   private circle: Shape;
   private rectangle: Shape;
   private square: Shape;

   constructor() {
      circle = new Circle();
      rectangle = new Rectangle();
      square = new Square();
   }

   drawCircle(){
      circle.draw();
   }
   drawRectangle(){
      rectangle.draw();
   }
   drawSquare(){
      square.draw();
   }
}

const shapeMaker = new ShapeMaker();
shapeMaker.drawCircle();
shapeMaker.drawRectangle();
shapeMaker.drawSquare();	
```