DEV Community

Cover image for Using JavaScript classes without the `class` keyword

Using JavaScript classes without the `class` keyword

Corbin Crutchley on June 29, 2023

Classes in JavaScript are both powerful and weird. While they allow us to create named objects with similarly purposed methods and properties, they...
Read full post
Collapse
 
efpage profile image
Eckehard •

People are used to use all kind of "tricks" in Javascript.

    const sqr = (x) => x*x
    console.log(sqr(3))
Enter fullscreen mode Exit fullscreen mode

Everybody knows, this defines a function, but WHY do we use a language, that states to define a constant, but creates a function instead? Why does a language allow to use this kind of ambiguity?

There are a lot of good reasons, why things are a bit wiered in JS, but not everybody is happy to use a language like a shell game. Classes make Javascript more explicit. If you define a class using the CLASS-keyword, everybody will know your intention. This is often not the case with common Javascript code...

Collapse
 
crutchcorn profile image
Corbin Crutchley •

I mean, I'm on board with the class keyword. This wasn't a slam piece, it was to help folks understand historical context of the language and maybe even understand the prototype system better

Collapse
 
efpage profile image
Eckehard •

Of course, thank you very much for your effort. I just wanted to note, that it is not a advantage to define a class without using the keyword. Even if it was only "syntactical shugar" (which i think it is not), it is better to use a clear naming for things you do.

We should always be clear that a programming language is made for programmers, not for computers. A computer uses opcodes, so in that case we should use assembler.

Thread Thread
 
vsaulis profile image
Vladas Saulis •

IMO computer languages are made for computers, - not for programmers. When you start realize it, programming will make easier.

Thread Thread
 
efpage profile image
Eckehard •

Sy, why do we not use assembler? It is much easier to understand for a computer...

Thread Thread
 
vsaulis profile image
Vladas Saulis •

Mostly we use heavy-weight frameworks which finally generate assembler/machine code for computers, not for you.

Collapse
 
calinzbaenen profile image
Calin Baenen •

And the post did a great job illustrating that.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • Edited

I'm inclined to think that the code example along the comment on the following paragraph is due to a common misunderstanding after seeing dozens of posts like "Do you prefer const or function?" because the only good answer to this is "it doesn't matter", let me explain why:

You can do:

const square = (x) => x*x;
Enter fullscreen mode Exit fullscreen mode

or

function square (x) { return x*x; }
Enter fullscreen mode Exit fullscreen mode

But they are not the same, technically.

1- const prevents reassignment of the reference (name) while function does not.
2- An arrow function doesn't have it's own lexical context, so it won't have a scoped this and can't be used as a constructor while function can be.
3- A const arrow function needs to be declared before calling it, otherwise it's undefined
4- A function can be declared after calling it.

Please note that you can also do:

const square = function(x) { return x*x; }
Enter fullscreen mode Exit fullscreen mode

Which both prevents reassignment and creates a lexical context, so it's (or it should be) a matter of -technical- needs on a given point on your software rather than a personal preference.

Now, as we should code for other humans to understand it, rather than just "the machine", the key here is in the naming guidelines, as a rule of thumb:

const myDog =
Enter fullscreen mode Exit fullscreen mode

No verb, this should be a value.

const getUserById =
Enter fullscreen mode Exit fullscreen mode

Does it have a verb? Yes, it should be a function then!

and please, no abbreviations nor acronyms on variable/const/function/class names please! 😂

Hope it helps,

Best wishes 😁

Collapse
 
vsaulis profile image
Vladas Saulis •

There is no such primitive like 'class' in JS.

Collapse
 
efpage profile image
Eckehard •

?

Thread Thread
 
vsaulis profile image
Vladas Saulis •

There are predefined primitives in JS. And there is no primitive 'class'.

Collapse
 
vsaulis profile image
Vladas Saulis •

Use 'var' - it's clearer.

Collapse
 
vsaulis profile image
Vladas Saulis • • Edited

I always knew that classes in JS are just syntactic sugar.

Collapse
 
urielsouza29 profile image
Uriel dos Santos Souza •

No!

Andrea Giammarchi

JS classes are not “just syntactic sugar” | by Andrea Giammarchi | Medium

Andrea Giammarchi ・ ・
Medium Logo webreflection.Medium

bhagatparwinder

Classes, Not Just Syntactic Sugar

Parwinder 👨🏻‍💻 ・ Sep 4 '20 ・ 3 min read

#javascript #beginners #codenewbie #webdev
Arun Rajeevan

Class is not just a Syntactic sugar in Javascript | by Arun Rajeevan | Medium

Arun Rajeevan ・ ・
Medium Logo arunrajeevan.Medium

Collapse
 
vsaulis profile image
Vladas Saulis •

I always convert JS classes into prototype chains without any consequences.

Collapse
 
wentout profile image
went • • Edited

Please fix the error of re-assigning Corbin.prototype, instead of :

Corbin.prototype = Object.create(Person.prototype);
Enter fullscreen mode Exit fullscreen mode

much better do the following:

Object.setPrototypeOf(Corbin.prototype, Object.create(Person.prototype))
Enter fullscreen mode Exit fullscreen mode

Because otherwise Corbin instance is not a member of Corbin constructor if you will use instanceof for check...

Seems there is a non-enumerable .constructor property in Corbin.prototype, accordingly with the specification, which is then used for matching instanceof. And when you just re-assign ... you deleting it.

And for sure instead of code above you may also go like this:


function Person() {
}
Person.prototype.personality = "quirky";

function Corbin() {
}
Corbin.prototype = Object.create(Person.prototype, {
    constructor: { value: Corbin },
    name: { value: "Corbin" }
});

const corbin = new Corbin;
console.log(corbin instanceof Person); // true
console.log(corbin instanceof Corbin); // true
Enter fullscreen mode Exit fullscreen mode