FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Johnny

@JohnnyBizzel

This is used a lot these days with modules in node for example

So you get lots of plugins for node that add functionality to your code -

These should be imported once and from then on you refer to that one instance of the module.

siliconchild

@siliconchild

@JohnnyBizzel yes classes that has one instance, i believe. these classes don;t need to be instantiated and can be used like object literals

Johnny

@JohnnyBizzel

Yes - a good technique to learn

siliconchild

@siliconchild

@JohnnyBizzel sorry i didn't understand their difference, only that node modules seem to use singletons. can you tell me what makes sense in my code, is it object literals and if so why?

Johnny

@JohnnyBizzel

Not sure. I don't see a New anywhere

As in const x = new Calc

I think this is instantiating a class

siliconchild

@siliconchild

@JohnnyBizzel Since I used static functions inside the class, There is no need to create a new instance of the object like const x = new Calc, I can just use const x = Calc.operate() like i would if i was using a simple object literal with methods

this is what confuses me

Johnny

@JohnnyBizzel

Oh ok. I have done similar in C# but not JS.

This is probably the difference then.

Not sure. I would have to read up on it more.

Thanks :)

siliconchild

@siliconchild

From reading online I sort of think that object literals and singletons classes are essentially the same thing, just different ways of writing the same. But I cold be entirely wrong

Johnny

@JohnnyBizzel

@siliconchild Could be.

Aditya

@ezioda004

@siliconchild Semantically Object literals and Classes are different thing. Classes are literal syntactical sugar for:

function Car (name){
  this.name = name
}
Car.prototype.sound = function(){
  console.log("vroom");
}

// class syntax
class Car {
  constructor(name){
    this.name = name;
  }
  sound(){
    console.log("vroom");
  }
}

As I can see you have constructor() function but you arent instantiating the class, so shouldnt you use static class field instead?

A recent JS proposal is adding static fields to the class, I think it'd be better for your use case:

class Calc {
    static sum;
    static operatorMemory;

    static reset() {
        Calc.sum = undefined;
        Calc.operatorMemory = undefined;
    }
 ...

siliconchild

@siliconchild

I didn't knew about static variables, makes sense . Thank you

Aditya

@ezioda004

Note: that you'd have to use babel to transpile this.

Since its a stage 3 proposal and not a standard feature just yet.

siliconchild

@siliconchild

oh so i cannot use static sum just yet without relying on babel?

Aditya

@ezioda004

Sadly no, but its again just syntactic sugar for:

class Calc {
}
Calc.sum;
Calc.operatorMemory;

So you can still use this

siliconchild

@siliconchild

so i have to define the variables outside the class?

Aditya

@ezioda004

Correct.

siliconchild

@siliconchild

what i did only makes sense if need multiple instances of those variables? right?

Aditya

@ezioda004

You mean the constructor() method?

siliconchild

@siliconchild

yeah

Aditya

@ezioda004

Yeah that method is only executed if you instantiate a class like const x = new Calc()

Otherwise its not executed so whatevers inside of it isnt ran either.

If you're interested this is how transpilation works

BTW I like the minimalist design of your calc, goodjob!

siliconchild

@siliconchild

Can you also tell me the difference between using

class Calc {
    static sum;
    static operatorMemory;

    static reset() {
        Calc.sum = undefined;
        Calc.operatorMemory = undefined;
    }
}

and using a object like this

const calc = {
    sum,
    operatorMemory,
    reset: function reset() {
        this.sum = undefined;
        this.operatorMemory = undefined;
    }
}

I am confused when to use which

Aditya

@ezioda004

So former one is more classical OOP that you learn in Java, C++, Python. Latter one is more prototypical inheritance, ie more javascript-y

Honestly, this is more subjective question - many will tell you to use the first one, others will tell you to use the second one as there is no correct answer and both are different design pattern

I personally like to use the first one since it feels more ergonomic to me.

siliconchild

@siliconchild

yeah the first on looks cleaner. So, under the hood it's just the same?

just a different way of writing things without any application difference?

Aditya

@ezioda004

Both are different under the hood too, class are synonym with functions in JS - but the examples solves the same problem, just different approaches

siliconchild

@siliconchild

ok thanks for clearing that up.

the first one with the class is called a singleton and the second one is called an object literal, right?

When i searched online, I came across these terms

just wanted to make sure my understanding of the terms are correct

Aditya

@ezioda004

Its not singleton, since singleton classes are the ones which have only 1 instance, your class doesnt have any instance...but singleton concept doesnt fit with JS. In classical OOP's class is a blueprint, but in JS - classes are an object themselves so its kinda misleading

siliconchild

@siliconchild

Okay so in JS since the class is already an object you can use it as it is, without making an instance of it.
Is that what happens with Classes with static variables and functions

Aditya

@ezioda004

Yes, classes are functions, functions are objects with [[Callable]] internal property.

ehutchllew

@ehutchllew

@siliconchild So you're essentially starting to dive into the realm of JS Prototyping. And when you "use" the class directly without creating a new one, you are using class/static methods, whereas when you create a new instance you have access to its prototype/instance methods.

Where communities thrive

People

Repo info

Activity