JavaScript Design Patterns


Design patterns are advanced object-oriented solutions to commonly occurring software problems.  Patterns are about reusable designs and interactions of objects.  Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions.

The 23 Gang of Four (GoF) patterns are generally considered the foundation for all other patterns. They are categorized in three groups: Creational, Structural, and Behavioral (see below for a complete list).

In this tutorial we provide JavaScript examples for each of the GoF patterns. Mostly, they follow the structure and intent of the original pattern designs. These examples demonstrate the principles behind each pattern, but are not optimized for JavaScript.

JavaScript-optimized patterns are available in our Dofactory JS, a unique guide for web app developers and architects developering with JavaScript and jQuery. Not only does it include optimized GoF patterns (using namespacing, closures, modules, immediate functions, prototypes, etc), but also Modern Patterns, Model View Patterns, Architecture Patterns, jQuery Patterns, and more. To learn more click here.

Creational Patterns
  Abstract Factory Creates an instance of several families of classes
  Builder Separates object construction from its representation
  Factory Method Creates an instance of several derived classes
  Prototype A fully initialized instance to be copied or cloned
  Singleton A class of which only a single instance can exist

Structural Patterns
  Adapter Match interfaces of different classes
  Bridge Separates an object’s interface from its implementation
  Composite A tree structure of simple and composite objects
  Decorator Add responsibilities to objects dynamically
  Facade A single class that represents an entire subsystem
  Flyweight A fine-grained instance used for efficient sharing
  Proxy An object representing another object

Behavioral Patterns
  Chain of Resp. A way of passing a request between a chain of objects
  Command Encapsulate a command request as an object
  Interpreter A way to include language elements in a program
  Iterator Sequentially access the elements of a collection
  Mediator Defines simplified communication between classes
  Memento Capture and restore an object's internal state
  Observer A way of notifying change to a number of classes
  State Alter an object's behavior when its state changes
  Strategy Encapsulates an algorithm inside a class
  Template Method Defer the exact steps of an algorithm to a subclass
  Visitor Defines a new operation to a class without change

// 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();


    return {
        request: function (zipStart, zipEnd, weight) {
            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);

You may also like

Last updated on Sep 30, 2023