Design Patterns in JavaScript — Part 1

Photo by Nick Fewings on Unsplash

If you have worked on any JavaScript project, believe me you must have used at least one design pattern. You can consider design pattern as code pattern. Choosing the right design pattern helps us to write efficient and organized code.

Design patterns are broadly categorized into following:

  • Creational
  • Structural
  • Behavioral

Creational design patterns are used for creating objects. In this blog we will be covering the mostly used creational design patterns. We will be covering structural and behavioral design patterns in upcoming blogs.

1. Constructor Design Pattern

  • This is the simplest creational design pattern.
  • Whenever we use new keyword, we will be using this design pattern.
  • This design pattern is used to create new objects using new keyword.
Design Pattern - Constructor
  • Code of Constructor design pattern in JavaScript will be like below:
Constructor Design Pattern Example by Yuvraj Patil

2. Prototype Design Pattern

  • This is a design pattern using which properties and methods are added/updated in prototype of objects.
  • Code of Prototype design pattern in JavaScript will be like below:
Prototype Design Pattern Example by Yuvraj Patil

3. Module Design Pattern

  • This design pattern provides encapsulation.
  • It was developed in 2003.
  • Code of Module design pattern in JavaScript will be like below:
Module Design Pattern Example by Yuvraj Patil

4. Enhanced Module Design Pattern

  • It is an enhanced version of Module Pattern.
  • It provides all features of module pattern but with cleaner coding style.
  • It is highly used in third party libraries.
  • Code of Enhanced Module design pattern in JavaScript will be like below:
Enhanced Module Design Pattern Example by Yuvraj Patil

5. Singleton Design Pattern

  • This design pattern makes sure that only one Instance is created throughout the application
  • Example: Task Manager of Windows
Design Pattern - Singleton
  • Code of Singleton design pattern in JavaScript will be like below:
Singletone Design Pattern Example by Yuvraj Patil

6. Factory

  • This design pattern simplifies object creation.
  • It creates different types of objects based on requirement.
  • Code of Factory design pattern in JavaScript will be like below:
Factory Design Pattern Example by Yuvraj Patil

Conclusion

Design patterns are very useful for creating efficient applications. Each design pattern has some unique feature which helps us to write better and organized code.

--

--

--

Loves coding and enjoys learning new technologies. Website: https://.yuvrajpatil.com

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

Recommended from Medium

Angular Basics-11

Summer Internship-House/Flat Rental Management(Web Application

Vim Clojure Tooling Redux

Constructing D3 Charts in React

7 Must-Watch TV Shows for Every Programmer

Building React apps with ReasonML, a strongly-typed functional language

Master Chess Multiplayer

How to Deal With Circular Dependencies in React Hooks

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
Yuvraj Patil

Yuvraj Patil

Loves coding and enjoys learning new technologies. Website: https://.yuvrajpatil.com

More from Medium

Declaring JS variables with var, let and const

Insertion sort with JavaScript

Javascript Private Properties, setting and getting errors!

Play To Learn Story

Asynchronous JavaScript in 15 Minutes: A Comprehensive Explanation