Learning JavaScript Design Patterns

#javascript #designpatterns #softwaredesign

I started picking up JavaScript again months ago. I created a repo for some notes that I created while learning Design Patterns in the context of JavaScript. I came from a more strongly-typed language like Java and C, now working on JavaScript I can't easily wrapped my head around applying the same general concepts that I'm used to in Java directly in JavaScript.

It's an entire paradigm shift that I might need some time getting used to, but I can feel the inner cogs of my comprehension clicking and slowly moving. I'm waiting for that day where the final click would happen and everything would just come naturally to me.

My general strategy was to pick up a book (I'm using this one Learning JavaScript Design Patterns by Addy Osmani) and somewhat expound on the explanations, add more examples that I find suiting, filling the gaps. If you guys are interested feel free to watch it here's the link of the repo: despa.js. I'll be updating it probably everyday. My goal is to learn one pattern a day.

Top comments (6)

YCM Jason • Oct 3 '18

Had a quick look at the "Creational Design Patterns".

You put these three together:

var newObject = {};
var newObject = Object.create(null);
var newObject = new Object();

Which would naturally mislead the readers to think they are equivalent. You should note that Object.create(null) do not inherit the Object.prototype.

There is also an error in the code example:

const defineProp = function(obj, key, value) {
    config.value = value; // config is not defined???
    Object.defineProperty(obj, key, config);
}

defineProp(newObject, 'someKey', 'Hello World');

yev • Oct 4 '18

Hi, thanks for the feedback! I've corrected said code snippet. Thanks for pointing that out.

As for your first concern. They indeed have some differences but I figured to just write something about it as a different topic. I should've gone first with that but my intention was first and foremost, to learn design patterns for myself. Right now, I'm just addressing JavaScript caveats that has something to do with design patterns context within JavaScript. Like defining a function within the function constructor versus via the prototype.

vikas nautiyal • Oct 2 '18

Which book are you referring to? It would be great to have practical examples of different design patterns it greatly helps visualise the requirement and usage of these patterns. Best wishes!

yev • Oct 4 '18

Hi, I forgot to link the actual book I'm using, I've updated the post now. Thanks for your feedback. It's Learning JavaScript Design Patterns by Addy Osmani like Thomas said.

I'll try to make practical examples like that as much as possible especially on those patterns that really needs extra attention.