A problem with classes and

[ablueblaze]

Greetings All!
I’m working on a simple todo app. (from the Odin Project)
I’ve run into a problem working with class objects in js.
Deciding to utilize the class object to store the data I need for the various page elements I have a few object properties that look like this:

this.priorityElement = {
      'element': 'p',
      'attributes': {
        'data-id': this.id,
        'class': 'priority',
        'text': this.priority
      }
    }

The reason for this is because I set up the class like this:

class Task{
  constructor(name, id){
    this.project = null
    this.id = id
    this.name = name
    this.complete = false
    this.priority = null
    this.description = null
    this.dueDate = null
    this.checkList = null
}

The problem I’m having is when I run a createNewTask function, and set one of the null values (let’s say priority) in the function.
the value is set, but the corresponding value ( the one inside priortyElement “‘text’: this.priority”) isn’t updating.

I think I can solve the problem like this:

example:

class Task{
  constructor(project=null, name, id, complete=false, priorty=null, description=null, dueDate=null, checkList=null){
    this.project = project
    this.id = id
    this.name = name
    this.complete = false
    this.priority = priority
    this.description = description
    this.dueDate = dueDate
    this.checkList = checkList

But that just looks clunky, and I’m trying hard to keep everything clean.

My question is:
A) Is the way I’m trying to set the class up dumb?
B) Is there a way to update the value the way I’m trying for?
C) If A and B are a negative, is there a cleaner way to set up the parameters of the constructor for the class?

example:

class Task{
  constructor(
    name,
    id,
    project=null,
    complete=false,
    priority=null,
    description=null,
    dueDate=null,
    checkList=null
    )

D) And if not A, B, or C, am I just completely daft and need to find a different way to do this?

[colinthornton]

You might try using a getter.

getter - JavaScript | MDN

It would be easier to help you with a full sample of the code.

[nivethakrishnan72]

@ablueblaze ,

The best approach would be using getters and setters.

The link below is best for understanding classes in javascript.

Guide to Understanding Classes in JavaScript

Hope it helps

[snowmonkey]

As has already been said, getters and setters are your friends in this one. But while we’re all advising what, it’s nice to know why.

First, whether defining a class or a factory or a module, the concern is the same: code to an interface, not an implementation. Allowing functions outside your class instance to alter data within your class directly leads to brittle code and instability. Instead, plan an interface that other functions or classes can consume, and keep all data modification contained.

Doing so, those interface functions can do more than simply set a value. They can check incoming data for validity, they can set internal flags based on that data, they can cause other events to fire…they’re simply a function, running within a particular scope and context.

So, if you need to find a way to control more then simply changing an object property, think about your interface.