DEV Community

Cover image for Classes in JavaScript

Classes in JavaScript

Samantha Ming on May 20, 2020

When I say ES6 Classes, you might go YAY ๐ŸŽŠ JS finally introduced a new object-oriented inheritance model. Well, not exactly. Itโ€™s still using the...
Collapse
 
vasilicaolariu profile image
Vasilica Olariu

The example given for Arrow Function has No Prototype Property isn't correct.

The problem with arrow functions (actually one of it's feature) is it always has the same this, as a result you can't use it as a method because this will always be the this from the context you defined the function (eg. window).

You're pointing out that Meal.prototype will be undefined after defining .eat as an arrow function. that's not correct.

Here's an example that explains the problem:
i.imgur.com/NwDHYYr.png

As you can see, the arrow function doesn't know about this.food.

Collapse
 
blackr1234 profile image
blackr1234

Great and useful article!

For me, I very seldom use JS classes. When I write React JS, I write function components instead of class components.

One minor typo thing: I think when you write cont they should be const under the section "Arrow Function has No New Operator".

Collapse
 
samanthaming profile image
Samantha Ming

Oh great catch! thanks for letting me know, i'll fix it ๐Ÿ‘

Collapse
 
genericallyloud profile image
Russell Leggett

I was somewhat involved during the design of classes for JavaScript and I can tell you - it was really touch and go there whether classes were going to be added, and if so, how they would be added. Most people involved wanted classes, but nobody could really agree what they should be. Some people wanted classes to be entirely different and an alternative to prototypes. The failed ES4 that never came to fruition was pursuing that approach. Ultimately the simple sugar approach won the day in the Maximally Minimal class proposal.

At the time, there were a lot of ad hoc and incompatible libraries that simulated classes. Additionally, there are aspects of the class pattern that were extremely error prone to do by hand - things like inheritance and doing super calls especially which were fixed with the new class syntax. Technically, the way super works is not possible to do with the old prototype style. It also dovetailed well into Microsoft's desire to create TypeScript and wanting to create something familiar to C# devs. While functional programming was definitely a big influence at the time, it didn't have the same hold that it has now. It's interesting to consider whether or not it was a good choice since many people are moving away from really using prototypes at all and trying to stick to pure functional style now, but the landscape was very different at the time.

Collapse
 
ianwijma profile image
Ian Wijma

One thing I personally don't like about classes in JS is that they are PURE syntactic sugar over functions. If you do typeof on a class it returns function. Which imo should return class. But that might just be me.

Collapse
 
samanthaming profile image
Samantha Ming

woo good point! that might throw some people off -- let me add that to my notes, thanks for sharing!

Collapse
 
dzienisz profile image
Kamil Dzieniszewski

I think we are lack of good plugins that will explain all of those quirks to new users or there are any?

Collapse
 
drubb profile image
drubb

Thanks for this useful introduction. As a PHP developer I've always wondered why so many JS people argue against using classes, e.g. in frameworks like React or VueJS. As for me, classes are still very useful, and their real power comes with inheritance / extensions.

Collapse
 
aminmansuri profile image
hidden_dude

Javascript was originally (and probably still is) an OO language based on prototypes instead of classes. This first appeared in Self and is a somewhat elegant way of doing OO. At least in theory.

Of course, real OO always could do anonymous functions/blocks/closures.. but the half-backed "popular" languages of the late 80s and 90s often omitted these features that were there at the inception of OO.

Javascript isn't the most complete language but in its elegant simplicity it included a lot of the original OO feel even though it chose to go with prototypes instead of classes.

Many today are discovering the functional programming techniques Smalltalkers used daily.

Collapse
 
speshov profile image
SPeshov

Great article! In my judgment, we can achieve the same results and cleaner code with functional programming. I personally avoid using them ๐Ÿคทโ€โ™‚๏ธ

Collapse
 
samanthaming profile image
Samantha Ming

Fair! And that's great! you got to do what works best for you ๐Ÿ˜Š -- My first language was Ruby, so I do lean towards class, for familiarity ๐Ÿ˜… But you know what, I'm going to challenge myself to write some code tidbit on the function way if I can demystify it, I think that will super cool ๐Ÿฅณ -- will add that to my list ๐Ÿ’ช

Collapse
 
gregfletcher profile image
Greg Fletcher

Great article!

I don't use classes that much but they're really useful in some cases. Great that we've got the choice now.

It's interesting that projects like TypeScript are written purely in a functional style. I found that ironic because TypeScript initially introduced classes as a possible syntax. Now it's part of the JS spec but TypeScript is written in a functional style. Anders Hejlsberg (C# and TypeScript creator) talks about it a lot in his talks. Nothing wrong with classes. Just interesting to see functions become accepted more and more in programming.

Programming styles interest me so I'm purely an observer. Not advocating for one over the other.

Collapse
 
haidv profile image
HaiDV

But actually, after being transpiling by Babel, it turns out that class is transpilered to prototype

Collapse
 
5456qwe profile image
1214586

I absolutely prefer functional programming. Thanks.

Collapse
 
samanthaming profile image
Samantha Ming

Fair! You got to do what works best for you! ๐Ÿ‘

Collapse
 
javierx2010 profile image
Javier Escobar

I think classes are cool! I've been tempted to use them in JS and I'd definitively will use them on projects with a big data domain.

Thanks for sharing!

Collapse
 
samanthaming profile image
Samantha Ming

Ya, give it a try! I know it's just sugar! But I used it on my personal project, and this sugar is sure sweet ๐Ÿ˜„

Collapse
 
ahmedhlaimi profile image
AhmedHlaimi

Nice article samantha , so u should take a look to nest js framework

Collapse
 
samanthaming profile image
Samantha Ming

wooo that's so fancy! thanks for sharing ๐Ÿ‘

Collapse
 
himankbhalla profile image
himank

First teach them to write classes. Then explain them this is not an actual class. Nice!!
Thanks for sharing.

Collapse
 
samanthaming profile image
Samantha Ming

LOL ๐Ÿคฃ๐Ÿคฃ๐Ÿคฃ (this is an awesome comment ๐Ÿ’ฏ)