JavaScript Design Patterns : Part 1

As a software engineer, you for-sure will encounter a recurring design problem that has already been solved by engineers before you. These solutions are termed as ‘design patterns’. Design Patterns simplify the process of developing a program and encourages code-reusability. I will introduce some design patterns that are used in JavaScript.

A pattern is a reusable solution that can be applied to commonly occurring problems in software design. In our case it is writing JavaScript applications. Design patterns act as templates which can be used to solve a particular problem. This does not mean that anything that solves a problem is a pattern. Here are some features of a design pattern for you to gain some perspective-

• It solves a problem
• It is a proven concept
• The solution is not obvious
• It describes a relationship
• It has a significant human component

The next big question is why we should use a design pattern? We should bother about design pattern because if a problem is already solved by somebody then it does not make a lot of sense to reinvent the wheel. The pattern also gives us a common vocabulary so that other developers know what we are talking about.

Types of Pattern

Classification of Design Patterns in JavaScript

Here we will discuss some of the most common types of design patterns in javascript-

1. Creational patterns —these are the patterns which deal with the creation of new instances of an object.
2. Structural patterns — while creational patterns deal with the creation of new objects, the structural patterns deal with the put-together of an object.
3. Behavioral patterns — these deal with how objects relate to each other and how they operate.

Don’t worry! We will dig-in deeper into these. These are the some of the most used patterns in javascript. Without wasting any more time let’s get started.

Creational Patterns

As I have mentioned earlier it is used to create a new object and how to create those objects based on the situation.

• Constructor pattern —used to create an object with its own object scope. When we use the constructor pattern, we use the new keyword. Whenever we use new keyword with a function, it makes a constructor function out of the function. When we create an object with new keyword the following things happen:

1. A brand new object gets created
2. Link to an object prototype is established
3. this is binded to the new object scope
4. this is implicitly returned

example of constructor pattern

• Module pattern — It is used to encapsulate a group of similar methods that we will use in our application. Generally, we see this pattern in things like services for database calls or HTTP get requests, etc. The difference between module patterns and constructor patterns is that whenever we are using module pattern, we only have one of something like a service for doing all the database work. On the other side we create a bunch of ‘detectives’ in constructor pattern.

example of module pattern

• Factory pattern — It is used to simplify object creation, different types of objects based on needs and repository creation.

example of factory pattern

• Singleton pattern — used to restrict an object to one instance of that object across the application. It remembers the last time we used the instance and hands the same instance back.

example of singleton pattern

Structural design patterns

It concentrates on how the object is made up and simplifies relationships between objects and it does that in two ways- by extending the functionality and by simplifying the functionality.

• Decorator pattern — used to add new functionality to an existing object without being too noticeable. It protects an existing object by wrapping up the object and allows additional functionality.

example of decorator pattern

• Facade pattern —used to provide a simplified interface or an abstraction over a complicated system. It deals with all the complexities and provides us with a simplified interface eg. jQuery.

example of facade pattern

• Flyweight pattern — conserves memory by sharing a portion of an object between objects. It results in a small memory footprint but it also works well when we have a large number of objects.

example of flyweight pattern

Behavioral design patterns

This type of design pattern is concerned with the assignment of responsibilities between objects and how they communicate. They deal with several responsibilities of objects like cooperating with other objects, assign clear hierarchy and encapsulate requests between the object and see if the requests are made appropriately.

• Observer pattern — Allows a collection of objects to watch an object and be notified of changes. It allows a loosely coupled system. In this a particular object is the focal point and a group of objects watch it for changes.

example of observer pattern

• Mediator pattern —It controls the communication between objects so neither object has to be coupled with the others. It allows for a loosely coupled system and one object manages all communication. It allows many-to-many relationships

example of mediator pattern

• Command pattern —It encapsulates the calling of a method as an object. It fully decouples the execution of the implementation. It allows for less fragile implementations, supports undo operations and supports auditing and logging of operations.

example of command pattern

These are the some of the common JavaScript design patterns that are used. Apart from these there are some other patterns that are widely used that will be discussed them in my next blog.

To learn more, check out -

learning js design patterns | addy osmani

Udacity free course