title: How to Update Ordered Collection of data against other collection of data - using Map Object
body: <p>I need to hold ordered data about persons, which i should be updating against data that is fetched from the server. The way the data is structured now, in the client side: </p>
  
  <p><strong>Anonymous Objects Array:</strong></p>
  
  <pre><code>const clientData = [{
          id: 1,
          employed: true
      },
      {
          id: 2,
          employed: false
      },
      {
          id: 3,
          employed: true
      },
      {
          id: 4,
          employed: false
      }
  ]    
  </code></pre>
  
  <p>Data coming from the server would look like that:</p>
  
  <pre><code>   const serverData = [
  {
      id: 2,
      newEmployedStatus: true
  },
  {
      id: 3,
      newEmployedStatus: false
  },
  ]
  </code></pre>
  
  <p>that way, updating my collection forces me to use 2 nested loops.
  one loop will iterate over the server array, and for each iteration, i would <em>search</em> its corresponding by iteration. like so:</p>
  
  <pre><code>// Very Verbose
  serverData.forEach((serverPerson)=&gt; {
      clientPerson = clientData.find((element)=&gt; {
          return element.id === serverPerson.id
      })
      clientPerson.employed = serverPerson.newEmployedStatus
  })
  </code></pre>
  
  <p>i want to avoid those nested loop and the complicated logic, so:</p>
  
  <p><strong>Object with accessors approach</strong></p>
  
  <pre><code>const clientData = {
      1: {
          employed:true
      },
      2: {
          employed:false
      },
      3: {
          employed:true
      },
      4: {
          employed:false
      }
  }
  </code></pre>
  
  <p>but then i wouldn't be able to rely on the order of the elements when i want to print them.</p>
  
  <p>so, there another approach i came to know lately:</p>
  
  <p><strong>Map Object</strong></p>
  
  <pre><code>const clientDataMap = new Map(
      [
          [1, { employed:true }],
          [2, { employed:false }],
          [3, { employed:true }],
          [4, { employed:false }],
  
      ]
  )
  </code></pre>
  
  <p>Updating the <code>clientData</code> will be with reduced complexity: </p>
  
  <pre><code>    serverData.forEach((serverPerson)=&gt; {
          clientDataMap.get(serverPerson.id).employed = serverPerson.newEmployedStatus
      })
  </code></pre>
  
  <p>Still able to print the persons in ordered fashion:</p>
  
  <pre><code>clientDataMap.forEach((value, key)=&gt; {
      console.log(key + ' = ' + value.employed);
    });
  </code></pre>
  
  <p>To sum the actual question:</p>
  
  <ol>
  <li>is it a valid use case to define <code>clientData</code> as <code>Map</code> , and enjoy
  the benifits of accessors like i am dealing with <code>Object</code>, and
  iterate like i am dealing with an <code>Array</code>?</li>
  <li>What are the downsides of using <code>Map</code> for that usecase? if any</li>
  <li>Are there other approaches for this problem that i missed?</li>
  </ol>