DEV Community

yev
yev

Posted on • Edited on

7 4

Learning JavaScript Design Patterns

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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (6)

Collapse
 
ycmjason profile image
YCM Jason

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');
Collapse
 
vycoder profile image
yev

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.

Collapse
 
vikasnautiyal profile image
vikas nautiyal

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!

Collapse
 
vycoder profile image
yev

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.

Collapse
 
thomasjunkos profile image
Thomas Junkツ

addyosmani.com/resources/essential...... just a wild guess 😉

Collapse
 
vycoder profile image
yev

Yes you're right, thanks! I forgot to add it on the post I was so sleepy the night I posted this. 😉

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay