Hello, everyone 👋. I am a newcomer when it comes to JavaScript. I come from an OOP background (C# and Java). I’ve recently learned that ES6 has a class
keyword that preforms similarly (but not exactly) to common OOP languages. Normally I would be inclined to use this feature in my projects; however, it came to my attention that the usage of class
in JavaScript seems to be heavily discussed (mostly in a negative light). My questions to this community are:
- Should it be used often, sparingly, or be outright avoided?
- What are its advantages and disadvantages?
- Are there specific cases where the usage of
class
excels?
Please share your thoughts.
Classes are very great for their intended use case: the classification of objects.
It’s very useful to combine a group of functions that only exist, and can only exist, in conjunction with another object. You also have the ability to take a type and morph it, allowing that one type to have large effects on everything that comes after it. But it has to be intentional. For example, a Button can be split and become an IconButton, or a ToggleButton, etc. It is a double-edged sword, since you can over complicate things when you don’t need inheritance.
Many people make the mistake of throwing functions everywhere, but don’t see the chain they create. For example:
createFoo()
will create an object. Then they’ll make another function, or a set of functions, that can only work the result of that function. You essentially made a broken apart class. I saw this recently inlit
. Their render function returnsTemplateResult
. Then they have a bunch of functions that only acceptTemplateResult
as input. That can be rebuilt as a class and have those functions part of the class. Breaking them up instead of using a class isn’t necessary. It becomes extra weight to lug that result around instead of having the functions bound to it withthis
.There is a good solid excuse for this practice, but it’s not a logical one, but an unfortunate consequence of our build tools. Tree-shaking loose functions is much easily done than a class. Because class functions can be invoked by name, it becomes nearly impossible to tree-shake.
People also, sometimes, confuse declarative syntax with functional programming. You can take a class, and use it declaratively, if you build out some helper functions. For example, take a look at [https://github.com/clshortfuse/materialdesignweb/blob/ec892c6f646ea7155edd8f7579389b27d02aa2fb/components/Button.js](this code). It’s still a class, that allows extensions, inheritance, function grouping, and construction, but you can manipulate it via a declarative syntax.
That’s one of the reasons classes in JavaScript get a bad rap. It’s structure is somewhat sporadic and can be hard to follow. But that’s a syntax issue, not a construct issue.
That said you should strive to use both functions and classes. If you can simplify your functions to allow mostly any primitive input, that’s great. It can be reused many times throughout your code. But if you have certain operations that only work with one type, then don’t be afraid to use a class.
This is an excellent take! 👏
This advice looks sound. I’ll definitely take it into consideration.