create account

Practicing JavaScript Patterns: Modules & Observer by seanlloyd

View this thread on: hive.blogpeakd.comecency.com
· @seanlloyd · (edited)
Practicing JavaScript Patterns: Modules & Observer
http://antler.co.za/wp-content/uploads/2014/04/honeycomb-21286-1920x1200.jpg

For a long time, I found it difficult to read JavaScript written by others. Where did that method come from? Is it core JS or a library? How on earth is this even working? I didn't like skipping over code I didn't understand...and yet some of it was simply beyond my grasp.  

The problem, I came to find, was I simply didn't recognize the patterns in front of me. I was struggling not just with another developer's implementation, but also with the basic pattern itself. Two books, in particular helped me to get unstuck:  

*   [YDKJS: Scopes & Closures](https://www.amazon.com/You-Dont-Know-JS-Closures/dp/1449335586/ref=sr_1_1?ie=UTF8&qid=1482594157&sr=8-1&keywords=scope+and+closures) (Kyle Simpson)
*   [JavaScript Patterns](https://www.amazon.com/JavaScript-Patterns-Better-Applications-Coding/dp/0596806752/ref=sr_1_1?ie=UTF8&qid=1499786713&sr=8-1&keywords=JavaScript+Patterns) (Stoyan Stefanov)

The YDKJS series is invaluable. Yes, I sometimes had to wade knee deep through a swamp of technical nitpicks that likely would never be an issue for me, but the payoff was a bunch of light bulb, "eureka" moments. Suddenly I went from knowing nothing to having a clear understanding.  

I clearly remember studying his **module** example. I generally understood it, but there were a couple details that stumped me. I memorized it and practiced repeatedly coding it out. I'd go for a walk around my office building contemplating it. On a car ride home, everything snapped into clear focus. I pulled over, coded it the module pattern again and ran a bunch of tests. I now understood.  

Now that recognized this module pattern, I thought back to the dependency injection pattern used by AngularJS ("Angular 1").  

Then I revisited Stefanov's book, which confounded me in my early days of learning JS. I sat at my new favorite coffee shop and started flipping pages. I actually understood what was in front of me. Then I saw his **observer** pattern, memorized it, practiced it. There was a mixin function that I later came to recognize as a precursor to the ES6 Object.assign(). 

```javascript
// mix-in pattern
function mixin (objParent, objChild) {
  for (let prop in objParent) {
    if (objParent.hasOwnProperty(prop) && typeof objParent[prop] === 'function') {
      objChild[prop] = objParent[prop];
    }
  }
}
```
<br>
I love that I've had the time to step through the progressions. Much of my learning started with ES5 patterns. This was helpful in understanding what the new ES6 features were trying to solve. 

Next up to understand: Currying, partial applications, functional programming (& ES6 versions it all).
👍  , ,
properties (23)
authorseanlloyd
permlinkpracticing-javascript-patterns-modules-and-observer
categoryjavascript
json_metadata{"tags":["javascript","progamming","coding"],"links":["https://www.amazon.com/You-Dont-Know-JS-Closures/dp/1449335586/ref=sr_1_1?ie=UTF8&qid=1482594157&sr=8-1&keywords=scope+and+closures","https://www.amazon.com/JavaScript-Patterns-Better-Applications-Coding/dp/0596806752/ref=sr_1_1?ie=UTF8&qid=1499786713&sr=8-1&keywords=JavaScript+Patterns"],"app":"steemit/0.1","format":"markdown","image":["http://antler.co.za/wp-content/uploads/2014/04/honeycomb-21286-1920x1200.jpg"]}
created2017-10-11 17:46:39
last_update2017-10-11 19:59:54
depth0
children0
last_payout2017-10-18 17:46:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length2,706
author_reputation127,378,175,246
root_title"Practicing JavaScript Patterns: Modules & Observer"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id17,416,189
net_rshares2,319,695,961
author_curate_reward""
vote details (3)