Design pattern in JavaScript (Part 1)

Photo by Christopher Gower on Unsplash

Let’s see what is design pattern

In simple words, a design pattern is to make code a little more maintainable, a little more readable, and help in designing better solutions depending upon the problem.

Questions which will be answered :

1. Who created design patterns?
2. What exactly it is?
3. When to use?
4. Where to use it?
5. How to use it?

As per Wikipedia, The idea was introduced by the architect Christopher Alexander.

Christopher Alexander very beautifully explained patterns as -:

The elements of this language are entities called patterns. Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.

The book named “Design patterns: Elements of Reusable Object-Oriented Software”, whose authors are often referred to as the “Gang of Four“explains the 23 classic software design patterns with problems and solutions.

Design patterns are -:

1. To solve Problem
2. It is a concept or arrangement of code that has solved many problems
3. To solve a problem that is complex or whose solutions are not easy, not like which can be solved with array or loop or etc.

Types of Patterns (JavaScript) created using draw.io

Creational Design Patterns

It focuses on object creation. Objects are created according to the need and conditions. So, these object creation is through the above-given design pattern under creational.

1. Constructor Pattern

Create new objects from functions. In JavaScript ( until ES 6), the function behaves like a constructor and instantiate new objects with members defined by that function. The keyword this inside the function references the new object which is created.

Constructor pattern example

The above code can be modified with the help of a prototype. A prototype is an object to which additional properties can be attached which will be shared across all the instances of its constructor function.

With the use of prototype

In ES 6, the class concept came in. So, we will see the code with that too.

With class

2. Module Pattern

Modules help in keeping the code of a project clean and organized. It is for grouping the ‘like’ methods for example service of HTTP calls or service of database call.

With Object Literal notation

It is basically in the form of an object using key-value pairs separated by a colon(:).Taking the above example of the task, we will create a repository file that will save the task in the database( here data array).

The above code can be more organized if we provide public and private encapsulation. We can shield some parts of the code from the global scope. Consider the above code in which data[] will have all the tasks. Now, we want it not to be accessible outside of this scope.

This is the better version of the above code.

It should be considered that it isn’t the true sense of “private” like in other languages that use access modifiers.

3. Factory pattern

The factory pattern simplifies the object creation. It does not explicitly require us to use a constructor( or new operator). It is useful if the object creation process is complex (i.e. creating different objects based on need). It can control which type to instantiate. Let’s take a small example below.

Factory pattern

4. Singleton pattern

It limits the instantiation of a class to only one object. It can be implemented by creating a class with a method that creates a new object if no instance exists and returns the reference of that object if already exists.

Example of Singleton Pattern

Thank you✨✨

Happy coding !!

We will see other design patterns in the upcoming part.