Why most JS devs don’t understand OOP

I don’t remember exactly when I had this “insight” but it was probably 1-2yrs ago, not really groundbreaking but may help some people see things with a different perspective…

Front-end JavaScript developers usually have a hard time trying to understand how Object Oriented Programming (OOP) works and how they can apply it to their work. I’ve seen some people saying that it’s because of the way prototypical inheritance works but I don’t think it is the main reason for that.

HTML may be the reason

My assumption is based on the fact that if you are just reusing existing elements created by markup or appending HTML fragments using innerHTML or some sort of library like jQuery you are not really thinking about objects, but in strings and HTML nodes instead. The different levels of abstraction difficult the understanding that at the end the markup is converted into objects that can be accessed, manipulated and extended[1] using JavaScript (a.k.a. DOM).

The markup distracts the developers, like on a magic trick, you simply can’t see what’s happening under your nose… When you create elements programmatically using document.createElement or new Image() it is way clearer that you are in fact dealing with objects and that an element can exist without markup or without being attached to the document.

CSS can help you understand

One thing that I also realized is that by using CSS and reusing styles across multiple pages or elements on your page, you are applying some principles of Object Orientation…

By setting p{color:red} and #foo p{font-size:15px}, it is implied that #foo p also has a red font color, which means that #foo p inherited all the properties from p that also means that #foo p extends p or that p is #foo p prototype (if you are talking in JavaScript terms). By declaring the generic properties on p and later extending and/or overwriting those properties to match more specific elements you improved the code reuse (reducing the amount of code required) and also the flexibility of your application (since all changes to p cascade to all elements that extend it), that’s “exactly” how OOP works.

Remember the CSS approach and forget about the markup

Until you stop thinking about the markup, object orientation may not make sense to you on the JavaScript context. You should control the markup not the opposite. Try to keep your code as far from it as possible, it should work almost independently. Application state and logic should be stored and handled without “touching” the DOM, the same way as you shouldn’t use HTML for styling – HTML is for structure/presentation, CSS for styling and JS for logic/behavior – using a template language like mustache (or any other) may help you see the markup as a complement and not the core of your structure.

Further reading:

[1] you shouldn’t extend DOM elements, it’s considered a bad practice.