Practicing JavaScript Patterns: Modules & Observer

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 (Kyle Simpson)
• 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().

// mix-in pattern
function mixin (objParent, objChild) {
  for (let prop in objParent) {
    if (objParent.hasOwnProperty(prop) && typeof objParent[prop] === 'function') {
      objChild[prop] = objParent[prop];
    }
  }
}

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).