DEV Community

Top 10 JavaScript Patterns Every Developer Likes

Shijie Zhou on July 23, 2019

1. The constructor Pattern In classical object-oriented programming languages, a constructor is a special method used to initialize a ne...

Read full post

Carlos Caballero • Jul 23 '19

I think that patterns are fundamentals to developers. I'm writing a posts series about the 23 traditional patterns explained as I had wish to learn.

Thanks!

Lucas Engel • Jul 25 '19

Following you for when you post that. =)

Carlos Caballero • Jul 25 '19

Thanks Lucas!

guico33 • Jul 25 '19

A bunch of outdated code snippets probably taken out from some design pattern book published 10 years ago.

There's really no use for this kind of article. The content isn't original (I've seen those same examples with outdated syntax many times) and there are now much more idiomatic ways to achieve the same things using modern JavaScript.

Toby Farley • Jul 26 '19

You would be correct but now with added typos! (i.e The mixin example)

addyosmani.com/resources/essential...

Quentin • Jul 23 '19

Thx to share this.
We use to work every day with design/architectural patterns without notice it.

Also, sorry to talk about that but there are several typos in your article (even on code examples).
If you are using VSCode like many others, please consider to use a tool such as Spell Right (marketplace.visualstudio.com/items...) ;)

Victor A. Barzana • Jul 25 '19

Yo, great tip, will recommend it to my Team as well!

Shijie Zhou • Jul 23 '19

That's great tools. Thank you Quentin

Sebastián Osorio • Jul 24 '19

Just to confirm that you are aware of the ES6 Class support caniuse.com/#feat=es6-class

I do like this post, but "JavaScript does not support the concept of classes" is not a fact since time ago.

Please keep learning and don't stop posting!

Drew Knab • Jul 24 '19

They're not really classes.

To quote the caniuse you posted:

ES6 classes are syntactical sugar to provide a much simpler and clearer syntax to create objects and deal with inheritance.

Hyurl • Jul 24 '19

We know JavaScript class is based on prototype, but can someone explain how
different it is than the legacy class in other languages such as Java, Python, C#, PHP, etc. Don’t those languages search properties and methods from a base class (/super class /parent class /prototype, whatever you call it)?

Sebastián Osorio • Jul 24 '19

We know that, but the concept of Class exists, and can be used as classes are expected to be used.

Let's not confuse the syntax sugar with the inability to take advantage of them.

izerozlu • Jul 25 '19

I've come to the discuss section to see this kind of comment. Good pointing!

Rubén Medellín • Jul 25 '19

The patterns are good. The code examples, uh, they're not.

The decorator pattern as it's shown is a really bad implementation, since you're not wrapping functionality but augmenting the results. You are calling the method cost() where you should be doing something like

Decorator(baseClass){
  orig = baseClass.cost;
  baseClass.cost = () => { return orig() + number; }
}

not call the method at the decoration moment.

I'm not going to point out the errors some othe people already pointed out

Hyurl • Jul 24 '19

This article must be posted 5 years ago.

Shijie Zhou • Jul 26 '19

right!

Oscar • Jul 23 '19

I like the examples and the patterns and how you explained them. I suggest you read about Singleton as an anti-pattern.

P.D.: check the mistakes in the examples, they won't run.

Michał Urbanek • Jul 25 '19

var myCar = {
name: 'bmw',
drive: function() {
console.log('I am driving!');
},
panic: function() {
console.log('wait, how do you stop this thing?');
}
};

//Usages:

var youcar = Object.create(Car);

console.log(yourcar.name); //'bmw'
I guess it should be var Car or create(MyCar)

Aleksandar Vasilevsk • Oct 29 '19

Great article, design patterns are very important for every developer. I have a similar article on JavaScript Design Patterns, feel free to check it
codespot.org/javascript-101-design...

Isaac Pak • Feb 7 '22

All I see is the same regurgitated stuff on every other article about Design Patterns. Car, Person, etc... Can someone please write up something that's practical to Web development for which Javascript is primarily used for?

Victor A. Barzana • Jul 25 '19 • Edited

I think it's great that you took some time to come up with a post, effort is what matters the most, there will always be haters. I almost forgot that we have been using most of them in our everyday life, now a bit differently with ES6. I would like to recommend two nits:
1- The title should have been: "Top 10 JavaScript Patterns Every Developer Likes"
2- You have a typo declaring the variable publish, this is what you wrote: "var publicsh ...".
3- Other than that I would probably have chosen ES6 to write the article, but good job :)