What are Design Patterns

What are Design Patterns

Ferenc Almasi β€’ 2020 December 10 β€’ πŸ“– 2 min read

Design patterns are tested and well-established solutions to commonly occurring software development problems. They are not tied to JavaScript specifically. They are reusable designs to these commonly occurring problems. Each design pattern has a name and we categorize them into three main categories:

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Creational Patterns

Creational patterns are all about object creation. Some well known creational patterns are:

  • Prototype: Lets you create copies of an object by cloning them, without depending on their classes.
  • Singleton: Ensures that a class has only one instance at any given time and provides global access to it.
  • Builder: Lets you construct complex objects, with the flexibility to produce different representations using the same construction mode.

Structural Patterns

Structural patterns are about finding ways to describe the relationship between different entities while keeping them flexible and efficient. Some commonly used structural patterns are:

  • Decorator: decorate your classes and objects with new behaviors by simply wrapping them into special functions.
  • Facade: create a simplified interface to an existing library or framework to ease their usage for common tasks.
  • Proxy: It creates an interface to another object, allowing you to perform certain tasks before or after accessing the object.
  • Composite: compose objects into a tree structure where every object in the tree has the same interface.
The Decorator Design Pattern in JavaScript
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Behavioral Patterns

Behavioral patterns aim to solve communication problems between objects. They tend to improve flexibility and decoupling. Some more well known behavioral patterns are:

  • PubSub: It creates publishers and subscribers, where each subscriber can listen to publishers, and publishers can notify subscribers about changes in your objects.
  • Memento: Let's you save and then later restore the previous state of your objects.
  • Command: Let's you encapsulate the information necessary to perform various parameterized actions.
PubSub in JavaScript: Intro to Design Patterns
What are design patterns?
If you would like to see more Webtips, follow @flowforfrank

50 JavaScript Interview Questions
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro