REVIEWED BY
Omar Rabbolini | Jan 09, 2023

Incorporating JavaScript design patterns into any JavaScript application is considered a best practice, particularly when collaborating with other developers or building in an enterprise environment. Many developers will interact with JavaScript design patterns so frequently that they don’t even notice they are there. 

Is JavaScript Used for Design?

No, JavaScript is a text-based programming language and not used in graphic, web or UX design. JavaScript design patterns and traditional forms of design are very different. Although traditional design involves the manipulation of images and layouts for various purposes, JavaScript design patterns refer to patterns of code that developers use to streamline development.
Find out who's hiring.
See all Developer + Engineer jobs at top tech companies & startups
View 9552 Jobs

 

What Are Common JavaScript Design Patterns?

Common design patterns in JavaScript include:

  • Module design patterns incorporate features developers use to keep pieces of code independent from other components, thereby providing a form of loose coupling.
  • Observer design patterns trigger an event that notifies other components when part of an application changes.
  • Prototype models create objects in performance-intensive situations.
  • Singleton design patterns restrict the instantiation of a class, or the creation of context based on a model, to a single instance. This becomes useful when precisely one model is needed to direct actions throughout a system. It is excellent for using resources shared by multiple clients.

What Are the Gang of Four (GoF) JavaScript Design Patterns?

  1. Abstract Factory
  2. Builder
  3. Factory Method
  4. Prototype
  5. Singleton
  6. Adapter
  7. Bridge
  8. Composite
  9. Decorator
  10. Facade
  11. Flyweight
  12. Proxy
  13. Chain of Responsibility
  14. Command
  15. Interpreter
  16. Iterator
  17. Mediator
  18. Memento
  19. Observer
  20. State
  21. Strategy
  22. Template Method
  23. Visitor

 

What Are the 23 JavaScript Design Patterns?

There are 23 fundamental design patterns developers can apply in JavaScript. These 23 patterns, known as the Gang of Four (GoF) and considered to be the foundation for all other patterns, can be broken down into three categories: creational patterns, structural patterns and behavioral patterns.

  • Creational patterns include Abstract Factory, Builder, Factory Method, Prototype and Singleton.
  • Structural Patterns consist of Adapter, Bridge, Composite, Decorator, Facade, Flyweight and Proxy.
  • Behavioral Patterns, the largest category, feature Chain of Responsibility, Command, Interpreter, Iterator, Mediator, Memento, Observer, State, Strategy, Template Method and Visitor.
10 JavaScript Design Patterns Explained in 10 Minutes. | Video: Fireship
Expert Contributors

Built In’s expert contributor network publishes thoughtful, solutions-oriented stories written by innovative tech professionals. It is the tech industry’s definitive destination for sharing compelling, first-person accounts of problem-solving on the road to innovation.

Learn More

Great Companies Need Great People. That's Where We Come In.

Recruit With Us