title: Javascript sync object with an array
body: <p>I have an object:</p>
  
  <pre><code>var obj = {'a':true,'b':false,'c':false,'d':true}
  </code></pre>
  
  <p>and I have a synced array which contains keys whose values are <code>true</code> in the object.</p>
  
  <pre><code>var arr = ['a','d']
  </code></pre>
  
  <p>So if <code>obj</code> changes to following: (<code>a</code>'s value changed to <code>false</code>)</p>
  
  <pre><code>obj = {'a':false,'b':false,'c':false,'d':true}
  </code></pre>
  
  <p>Then <code>arr</code> should be synced to following: (<code>a</code> element gets removed from <code>arr</code>)</p>
  
  <pre><code>arr = ['d'];
  </code></pre>
  
  <p>I have thought of two solutions:</p>
  
  <ol>
  <li><p>Whenever object changes, I manipulate the same arr by performing push/remove operation on that key in array depending on the value of the key in object. (Updates to the object can be easily detected using angularjs in my case)</p></li>
  <li><p>Whenever object changes, I will replace old array with new array containing only those keys whose value is set to <code>true</code> in.</p></li>
  </ol>
  
  <p>Which solution is better??   </p>