CODEWITHSUNDEEP
javascriptnode-modules
limitlessloop
limitlessloop

Reputation: 1474

How to update an object which exists in another module in Javascript?

I've broken down my source code so that certain classes are responsible for creating and updating key objects in my application. The trouble is when I move those objects into separate modules and they are updated outside of the module, other modules do not reflect the updated object because it's not aware of the changes which have happened outside of the module.

For example below is a simplified example:

// config.js

class Config {
  constructor() {
    this.value = false
  }
  set(value) {
    this.value = value
  }
}

const config = new Config()

export default config

//output.js

import config from './config'

console.log(config.value) // -> false

// Use the config to return a new value
class Output {
  constructor() {
    this.data = config.value
  }
}

const output = new Output()

export default output

//index.js

import config from './config'
import output from './output'

config.set(true) // Value set by user of application

console.log(config.value) // -> true
console.log(output.data) // -> false

I know why this doesn't work as I want, but I don't know how to I should be dealing with this situation. Currently, the only way I can think to get around this issue is to pass the updated object to each class as a parameter of its constructor. However, in my actual application, it's much more complicated than this example and it gets very messy having to import the updated object into each class or function which needs it.

You can see an example of the actual source code where I am passing config, theme and data through the constructor to get around it.

What's the better way to deal with this issue?

Upvotes: 2

Views: 2364

Answers (1)

Amardeep Bhowmick
Amardeep Bhowmick

Reputation: 16908

In your output.js file, you are copying the value of config.value in the constructor when the object is instantiated. After the instantiation you are exporting the object initialized with false.

Now in the index.js you are accessing the value of output.data after you changed the value property in config to true, but the thing is when the output object was instantiated the value of the data property was copied over from the config.value and does not maintain a reference to it. This is because the value is a primitive and not an object reference.

So to fix this you need to use the config object reference which is already imported in your module, so that when the object state is changed you get the updated value through the reference:

import config from './config.js'

class Output {
  get data(){
    return config.value;
  }
}

Here I created a getter having the name data which reads the data directly from the config object reference.

Now when you change the value through the set method of config the new value would be reflected:

config.set(true);

console.log(config.value) // -> true
console.log(output.data) // -> true

Upvotes: 3

Related Questions