Javascript class vs function when to use?

Question

I am little bit confused when and under what circumstances we'd choose classes rather than functions.

class Something {
  constructor(text) {
    this.text = text;
  }

doSomthing() {
  let checkBoolen = false;
    
     document.querySelector(`.ss${this.text}`).addEventListener('mousedown', e => {
       checkBoolen = true
        console.log(this.text)
    })
    
    document.querySelector(`.ss${this.text}`).addEventListener('mouseup', e => {
      if(checkBoolen === true) {
         console.log('do something')
         checkBoolen = false
        setTimeout(function(){ console.log(checkBoolen)}, 1000)
      }
    })
  }

  newDIV() {
    var btn = document.createElement("BUTTON"); 
    btn.classList.add(`ss${this.text}`)
    btn.innerHTML = `CLICK ${this.text}`;                   
    document.body.appendChild(btn);   
    this.doSomthing()
  }
}

let newdiv1 = new Something('1');
let newdiv2 = new Something('2');
newdiv1.newDIV();
newdiv2.newDIV();

  <div id="app"></div>

now, if we use function

function createButton(name) {

  let checkBoolen = false;
  var btn = document.createElement("BUTTON"); 
  btn.classList.add(`ss${name}`)
  btn.innerHTML = `CLICK ${name}`;                   
  document.body.appendChild(btn);   
  
   document.querySelector(`.ss${name}`).addEventListener('mousedown', e => {
        checkBoolen = true
        console.log(name)
    })
    
    document.querySelector(`.ss${name}`).addEventListener('mouseup', e => {
      if(checkBoolen === true) {
         console.log('do something')
         checkBoolen = false
        setTimeout(function(){ console.log(checkBoolen)}, 1000)
      }
    })
}

createButton('1')
createButton('2')

They both do the same thing, so I am a bit confused should I use class or function ? Thanks

If you use a class, make sure to transpile if you wish to support ancient obsolete browsers — CertainPerformance, Sep 06 '19 at 12:04
At the beginning, there were no classes in JS. It is just syntactic sugar. I think it comes handful when you try to do stuff like inheritance, it could be easier for the newbies to get something working than to learn how prototypes work in JS. — sjahan, Sep 06 '19 at 12:06
To make it simple: Use a class when you need multiple copies of the same object ( instances ) that you want to add functions ( methods ) or values ( properties ) to. The advantage is that all those objects can share the same functions but still have different values. Everything else is probably a function. The reality is way more complex than this, but that the basics. — Shilly, Sep 06 '19 at 12:09
check this answer will help you https://stackoverflow.com/questions/816071/prototype-based-vs-class-based-inheritance — Joseph, Sep 06 '19 at 12:11
For the record: your example is basically recreating a ``. So in this specific case, I would use neither and prefer a real checkbox. — Shilly, Sep 06 '19 at 12:16

score 1 · Answer 1 · answered Sep 06 '19 at 12:15

The same like in any other language - a function is a way to package up some code so that it can be reused, while a class is a “blueprint” for an object, an entity that contains related code and data (methods and state).

Something a bit more specific to JavaScript are constructor functions - these are functions that act a bit like classes, in that they can be used to create new objects that will have some specific type (i.e. you can later check that an object has been created by a particular constructor function). They differ from classes in that they’re more flexible, but may sometimes require more code (specifically inheritance is a bit ugly).

score -1 · Answer 2 · answered Sep 06 '19 at 12:08

Your question is about functional vs object-oriented programming and since javascript allows both, it's up to you how to handle.

You can use classes for state-full objects in your application, otherwise might use functions as long it is consistent.

More information here:

https://www.codenewbie.org/blogs/object-oriented-programming-vs-functional-programming

Javascript class vs function when to use?

2 Answers2