Design Patterns in Javascript /Node — 2020

We will learn all Give Design Patterns

1. Builder Pattern

  1. Problem
In this Example want to pass name, address value to User Object so we have to pass: undefined for age, phone because User object receive: 4 parameters
new User("Shivam", undefined, undefined, new Address("208001", "Kanpur"));

Traditional Builder Pattern

Builder Pattern
let user = new UserBuilder("Shivam").build();
console.log(user); // Output:"name":"Shivam"}
let user = new UserBuilder("Shivam").setAge("24").build();
console.log(user); // Output: {"name":"Shivam","age":"24"}
let user = new UserBuilder("Shivam").setAge("24").setPhone("7777777777").setAddress("208001", "kanpur").build();
console.log(user); // Output {"name":"Shivam","age":"24","phone":"7777777777","address":"208001"}

Javascript Specific way

Javascript Way to achieve Builder Pattern
let user = new User("Shivam", {age: 25, address: new Address("209303", "Rura"), phone: "7272727272"})Output: {"name":"Shivam","age":25,"phone":"7272727272","address":{"zip":"209303","street":"Rura"}}
constructor(name, {age, phone='777777777', address} = {})

2. Singleton Design Patterns

  1. We can not change it freely because all our Project depends on that single Object.

PROBLEM:- Suppose we have a logger function for logging the project (Without Singleton pattern)

logger.js
first(): It creates a new instance of Logger and this.logs = [];second(): It again creates a new instance of Logger that's why printLogout() function returns: 0

Solve this problem by Singleton Design pattern

Create Singleton Class
const logger = new Logger()
No need to create an instance in first.js and second.js
When creating logger Function, Generic HTTP Methods 
Angular Services are also Singleton

3. Factory Pattern

  1. Factory allows us to handle an Object in a centralized location. No need to use new keywords everywhere on code to create Objects.
  2. Keeps code clean and concise
A company have 2 types of Employees
a. developer
b. Testers
Create a Factory for generating — Developer and Tester Objects.
1. Developer (When type: 1 receives)
2. Tester (When type: 2 receives)
Exactly we can create as many types of Employee like -Designers, Analyst etc..
let empObj = new EmployeeFactory();
let emp = empObj.create("Shivam", 1);
Output:: Hi, I am Shivam and I am a Developer
Factory Example

4. Facade Pattern

Facade provides interface: to access Subsystem Easily
Code without Facade implementation
getFetch(): Shows implementation of Facade design pattern
  1. We have a central function to put axios.get()
  2. If any time we want to change our library axios() to fetch() so we just need to update our getFetch()

5. Command Pattern

Simple Calculator class
  1. Create a class for each operation of calculator like- AddCommand, SubtractCommand etc
Command Pattern Example
  1. If required Do operation and then Undo operation
  2. Playback and rewind so we can create commands
  3. In-Text editor many places this pattern can be used — Shortcuts command(ctrl+b, ctrl+r ) etc

6. Observer Pattern

Observer pattern is used when there is one-to-many relationship between objects such as if one object is modified, its depenedent objects are to be notified automatically. Observer pattern falls under behavioral pattern category
Subject — Subscribe/unsubscribe Observers
> When Api response come back from server
> Realtime Data listen using Observables
Understand Subject and Observers

7. Null Object Pattern

class User {
constructor(id, name) {
this.id = id;
this.name = name;
}
hasAccess() {
return this.name === "Shivam"; }
}
const users = [ new User(1, "Bob"), new User(2, "John")]
class NullUser {
constructor() {
this.id= -1;
this.name= "Guest"
}
hasAccess() {
return false;
}
}

--

--

--

Full Stack Engineer (Web/App) working on different JS Technologies & frameworks— Angular, Node, Typescript, Ionic, Firebase, AWS, ElK...Love to write cool stuff

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Unmasking the Anonymous Function

[English] Template — Vue JS + Asp.Net Core — Visual Studio 2019

Javascript Tip — Use Optional Chaining

Tutorial: JavaScript Variables

Getting Started with Enigma: A Front End Demo for dApps

Javascript vs PHP: Meaning, Pros, Cons, & Difference

var me = this; in JavaScript??

How to run Web Browser in BrowserStack via serenity.conf

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shivam Gupta

Shivam Gupta

Full Stack Engineer (Web/App) working on different JS Technologies & frameworks— Angular, Node, Typescript, Ionic, Firebase, AWS, ElK...Love to write cool stuff

More from Medium

Using Closures To Capture and Modify Primitive Variables in JavaScript

“This.” keyword with arrow functions and with normal functions in JavaScript

JavaScript Framework vs Library

Angular vs. React comparison