title: Best way to update an object that's referencing data from another object in Javascript?
body: <p>I'm having trouble thinking of the best way to go about this without a framework.  Let's say I have code that looks like this.</p>
  <pre><code>let x = {
      someData: 5
  }
  
  let config = [{
     moreData: `You have ${x.someData} flunderflaffles`
  }]
  //user input affects x
  button.onclick = ()=&gt;{
      x.someData++
      appendEle()
  }
  
  const appendEle = () =&gt; {
      document.body.append(`&lt;p&gt;${config.moreData}&lt;/p&gt;`)
  }
  </code></pre>
  <p>This is a very simple explanation of what I'm doing right now but I hope you get the gist.  Basically config.moreData will always have a value of 5 since thats what it was when it was initialized.  Can anyone shed some light on how to handle this better so that the data in config reflects that in x? Thank you.</p>