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 Playful Programming •

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