DEV Community

Design Patterns in JavaScript

Zeeshan Haider Shaheen on August 27, 2021

20+ Design Patterns explanation in JavaScript We will discuss implementation of Design Patterns by using JavaScript ES6 classes. ...
Collapse
 
mofiqul profile image
Mofiqul Islam

Great article. Personally I hate oop in js

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

It's not that bad😉 It just take sometime to understand things 😊

Collapse
 
danielbastos11 profile image
Daniel Bastos • Edited

I really appreciate your point of view. My answer was a bit too long to fit in a comment, so it inspired me to write this article

tl;dr: I believe the point most people miss about Design Patterns is that they're not about classes and objects, but about simple, scalable, highly reusable solutions to common problems -- and that applies to any paradigm.

Even if you don't have time to read my post, thanks for inspiring it!

Collapse
 
zlatko_iliev profile image
Zlatko Iliev

I could say it is an absolute must to know OOP in JavaScript! There is so much more you can achieve using OOP that functional does not support. A good developer knows the benefits of both and uses them wisely. You can't go completely OOP or completely functional, you need to take the best of both worlds!

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Not knowing how to implement those design patterns without using OOP doesn't mean that you need OOP to reproduce them.

Collapse
 
devdufutur profile image
Rudy Nappée

Actually you don't need 75% of those design patterns if you don't use ES6 classes 😅

Collapse
 
sreejithns profile image
Sreejith N Subramanian

Actually OOP is very necessary in large scale front end or backend projects that use javascript. I use typescript to have a highly scaled application that is easy to maintain with design patterns.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

This should be the most inaccurate paragraph that I read in the last months.

Collapse
 
grishavasilyan profile image
Grisha Vasilyan

Thanks for for this article
It's cool

 
degesis profile image
PovilasB • Edited

I do agree with Pieter, OOP is completely unnecessary in React and using TS has nothing to do with OOP...

Thread Thread
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen • Edited

I appreciate everyone's point of view. I am a Frontend engineer and I have to coordinate with backend developers most of the time and I have noted that most of the time backend developers use OOP to solve their problems because it makes things lot more easier.

I know many frontend deveoplers using Class based components for creating web applications just because of client's requirement or they are comfortable with class based components.

I think it's somebody's choice at the end we have to create a bug free application.

Thread Thread
 
jcarlosweb profile image
Carlos Campos

Pieter, OOP is not necessary, React is not necessary either, lol

Thread Thread
 
jcarlosweb profile image
Carlos Campos

By the way, I have stopped reading the article since the first example that does not even make use of the factory method, it is there for nothing.

Thread Thread
 
jcarlosweb profile image
Carlos Campos

It seems that Factory Method has been fixed. Welcome.

Collapse
 
juanip42 profile image
Juani

Hi, great article!

I think there is a little error in the memento pattern implementation, but correct me if I'm wrong. The method #deposit(amount) should create the memento before updating the balance, so then it could be used to restore the account to the previous amount.

Keep up the good work! :D

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen • Edited

Hello,
Thank you for your feedback.
I also have created it on GitHub. It is open source, if you think there's some mistake in this article you can contribute to it. I'll make changes here as well after analysing the changes you will make.
Here's the link of repository.

github.com/zeeshanhshaheen/design-...

Collapse
 
rsmithlal profile image
Robert Smith

This was a great article! Your descriptions of design patterns could easily be related to other programming languages if different examples were given for each of those languages. Most (if not all) of these patterns can be used in other languages and some even make up the core of certain frameworks! I use a lot of them daily in my full stack work with Ruby on Rails.

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

Thanks 😊

Collapse
 
holyaustin profile image
holyaustin

What a piece. looking forward to using any the behavioral pattern someday.

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

Share you experience with me when you use it✌️ Good Luck 👍

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

Great Article!

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

Thanks 😊

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

I'll be writing some cool content release to ReactJs and JavaScript on my Twitter account. Don't forget to follow me on twitter 😊

twitter.com/zeeshanhshaheen

Collapse
 
pengeszikra profile image
Peter Vivo

Means : js oop design pattern ?

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

Yes

Collapse
 
saroj8455 profile image
Saroj Padhan

Great article 👍

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

Thanks 😊

Collapse
 
onurhandtr profile image
Onurhan

Amazing man! thanks 🦄

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

Thanks 😊

Collapse
 
mazid1 profile image
Mazedul Islam

Wow! Thanks for the great article.

Collapse
 
zeeshanhshaheen profile image
Zeeshan Haider Shaheen

Thanks