These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Dec 2018
Jonathan Cunanan
@jcunanan05
Dec 09 2018 00:13
Thank you @JohnnyBizzel
Alwin George
@siliconchild
Dec 09 2018 02:57

@siliconchild
I'm a novice in Javascript, I just know basic DOM stuff and to build such projects. I thought I would challenge myself and create a Calculator without following any tutorial. The code I wrote after hours of trying was super messed up and hacky, it was a miracle it worked at all.

I wanted to write better cleaner code, I had seen and followed Practical JS before where one Build as todlist app as an object, this is the only OOPS Experience I had, I also watched and followed a Video on Classes and Static Functions. I decided to delete my existing code and write a better codebase using Classes
here is my attempt at it https://codepen.io/siliconpen/pen/pqogNy
Please give me inputs, there could be a a lot of places where my code is reductant
I would love to learn where this code can be improved and optimized, on top of that please let me know if my documentation is any good, this is my first attempt at adding explanatory comments

Johnny
@JohnnyBizzel
Dec 09 2018 03:38
@siliconchild Does it work?
I notice it does work occasionally if you don't make mistakes.
Note that you have chosen a hard challenge to start your learning. The calc has many cases and conditions which need validation.
It might be your experience but you don't seem to have considered any of these validation problems.
I like the styling. :)
Alwin George
@siliconchild
Dec 09 2018 03:47
@JohnnyBizzel yes I'm yet to work on the edge cases, This is a simple calculator. What i need critique is on the how the code is put together, how can it be optimized, is the way i implemented the code using classes the right way to do it? I wonder what is the difference between using object literals vs singleton classes. when to use which.
Johnny
@JohnnyBizzel
Dec 09 2018 03:50
@siliconchild Where would you put the input validation?
No idea?
Then in my opinion. It is over egging the pudding to do it all in Classes.
Alwin George
@siliconchild
Dec 09 2018 03:54
@JohnnyBizzel The only validation i have now is checking if user enters multiple decimal points and ignoring it.
Edge cases I'm going to work on next is
  1. if user uses equates in between the calculation stops and needs to be reset now, need to continue the chain even when equate is used
  2. if the user presses the operator twice as in 5+*4, changing that to 5 x 5 instead of code breaking.
Johnny
@JohnnyBizzel
Dec 09 2018 03:55
I can read it because I come from C# programming which was also OOP. So if it is just an exercise in trying out OOP style then yes, well done it - looks good.
@siliconchild I asked where you would put validation. See if we are on the same page.
Alwin George
@siliconchild
Dec 09 2018 03:55
@JohnnyBizzel this is my first attempt at making anything with classes at all, should i just use object literals and use classes when i understand oops better?
Johnny
@JohnnyBizzel
Dec 09 2018 03:56
@siliconchild I want to see if you understand your own code :P
Alwin George
@siliconchild
Dec 09 2018 03:56
@JohnnyBizzel my validation is currently in the event object
i thought that made sense
Johnny
@JohnnyBizzel
Dec 09 2018 03:58
@siliconchild Should be in the Calc class in my opinion
 if (Calc.operatorMemory === undefined) {
            Calc.operatorMemory = operator;
        }

        if (Calc.sum === undefined) {
            Calc.sum = input;
        } else...
Here somewhere I would have thought
I would recommend a Regular Expression test
Alwin George
@siliconchild
Dec 09 2018 04:00
@JohnnyBizzel could you tell me why, I imagine the event object as something that captures user input with proper validation and passes that to the calc object to do the math. Could you tell me why putting the validation in Calc is the way to do it?
Johnny
@JohnnyBizzel
Dec 09 2018 04:01
Ok where exactly? How would you fix the user pressing 2 = + 4
Alwin George
@siliconchild
Dec 09 2018 04:03
2 = +4 should be treated as 2+4 right?
Johnny
@JohnnyBizzel
Dec 09 2018 04:04
Yes
Alwin George
@siliconchild
Dec 09 2018 04:04
equates just returns the sum, so 2 = should return 2 and then +4 should add 4 to the sum which is 2
Johnny
@JohnnyBizzel
Dec 09 2018 04:05
So the user can't change their mind about the operator and there is no UI feedback on this
Alwin George
@siliconchild
Dec 09 2018 04:05
I have to think through about validation and where to place it, thanks for making me think about it
Johnny
@JohnnyBizzel
Dec 09 2018 04:06
I think you are right about doing it in the Event class
Alwin George
@siliconchild
Dec 09 2018 04:06
2=+4 and 2+x4 is different right @JohnnyBizzel
Johnny
@JohnnyBizzel
Dec 09 2018 04:07
However I went straight to the Calc class as I thought logically this is where it should be??
Alwin George
@siliconchild
Dec 09 2018 04:07
2 =+4 should be 6 and 2+x4 should be 8
Johnny
@JohnnyBizzel
Dec 09 2018 04:07
Yep
Also -2 - 5 = ?
NaN
Some users have a (+-) button to change the number to a negative or positive.
(I didn't)
I just detected it in my code
Alwin George
@siliconchild
Dec 09 2018 04:10
yeah a seperate +/- button seems easier to implement as -2+-5 seems challenging to implement as it gets confused with -2+-5 as just -2-5, like the user changed the operator
could you tell me about object literal vs singleton class
the answers i find online are too techincal
and beyond my current understanding
also about adding comments, does my comments make sense? is this the way to explain code or can you tell me what I'm doing wrong there
Johnny
@JohnnyBizzel
Dec 09 2018 04:15

could you tell me about object literal vs singleton class

I was going to ask you! If you can explain it, it means you understand it.

Comments are great. You are a rare example to many coders who don't bother commenting!!
I would say some are not necessary (for me) but if you are in the habit of writing comments, stick at it!
Alwin George
@siliconchild
Dec 09 2018 04:19
Thank You, From my understanding you use classes when you need to create multiple instances of an object, when you just need one and only one instant, a object literal with methods and a class with singleton functions seem similar in utility
I'm confused which is to use when
Johnny
@JohnnyBizzel
Dec 09 2018 04:20
Object literals you see everywhere these days
Very useful
Singleton class I think means you can only have once instance of that class
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.
Alwin George
@siliconchild
Dec 09 2018 04:22
@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
Dec 09 2018 04:23
Yes - a good technique to learn
Alwin George
@siliconchild
Dec 09 2018 04:24
@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
Dec 09 2018 04:26
Not sure. I don't see a New anywhere
As in const x = new Calc
I think this is instantiating a class
Alwin George
@siliconchild
Dec 09 2018 04:28
@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
Dec 09 2018 04:29
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 :)
Alwin George
@siliconchild
Dec 09 2018 04:34
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
Dec 09 2018 05:11
@siliconchild Could be.
Aditya
@ezioda004
Dec 09 2018 06:26
@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;
    }
 ...
Alwin George
@siliconchild
Dec 09 2018 06:29
I didn't knew about static variables, makes sense . Thank you
Aditya
@ezioda004
Dec 09 2018 06:30
Note: that you'd have to use babel to transpile this.
Since its a stage 3 proposal and not a standard feature just yet.
Alwin George
@siliconchild
Dec 09 2018 06:30
oh so i cannot use static sum just yet without relying on babel?
Aditya
@ezioda004
Dec 09 2018 06:31
Sadly no, but its again just syntactic sugar for:
class Calc {
}
Calc.sum;
Calc.operatorMemory;
So you can still use this
Alwin George
@siliconchild
Dec 09 2018 06:32
so i have to define the variables outside the class?
Aditya
@ezioda004
Dec 09 2018 06:32
Correct.
Alwin George
@siliconchild
Dec 09 2018 06:33
what i did only makes sense if need multiple instances of those variables? right?
Aditya
@ezioda004
Dec 09 2018 06:33
You mean the constructor() method?
Alwin George
@siliconchild
Dec 09 2018 06:33
yeah
Aditya
@ezioda004
Dec 09 2018 06:34
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!
Alwin George
@siliconchild
Dec 09 2018 06:39

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
Dec 09 2018 06:57
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.
Alwin George
@siliconchild
Dec 09 2018 06:59
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
Dec 09 2018 07:01
Both are different under the hood too, class are synonym with functions in JS - but the examples solves the same problem, just different approaches
Alwin George
@siliconchild
Dec 09 2018 07:02
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
Dec 09 2018 11:41
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
Alwin George
@siliconchild
Dec 09 2018 11:58
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
Dec 09 2018 12:12
Yes, classes are functions, functions are objects with [[Callable]] internal property.
ehutchllew
@ehutchllew
Dec 09 2018 12:41
@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.
like Array.isArray() vs Array.prototype.find()
Alwin George
@siliconchild
Dec 09 2018 12:57
I have this strange behaviour where my code works fine on local server and it's buggy on codepen.
can some one point out possible causes
Alwin George
@siliconchild
Dec 09 2018 17:53
Functions such as being able to do 2+4=(6 )*2 and get 12. ie to use equate in between works on my local server but not on codepen
another functionality is when user does 2+4=(6 ) and then enters a new number the calculator resets itself, this too works on local server and not on codepen

I have used this function to initiate the app

class Event{
........
........
static init() {
        document.addEventListener("DOMContentLoaded", function () {
            Event.captureInput();
        });
}

Event.init();

on my local server this doesn't fire and i have to manually run Event.captureInput() in my console to get it woring, on codepen though it works fine

Alwin George
@siliconchild
Dec 09 2018 17:59
Can someone guide me to possible causes?
Alwin George
@siliconchild
Dec 09 2018 23:59
The codepen bug is resolved, I still run into the addEventListener not loading Event.captureEvent Error