title: Storing up-to-date array index in a separate array with JavaScript
body: <p>I have an array of objects. Key of the array is generated automatically with .push(). Some objects might be removed from the array with <code>delete array[index];</code>. Array might contain anything from 0 to 10K+ entries.</p>
  
  <p>Here is the declaration and some of the logic:</p>
  
  <pre><code>var allClients = [];
  
  someFunction(client) {
      allClients.push(client);
  
      var callbackFunction = function() {
          var index = allClients.indexOf(client);
          try {
              delete allClients[index];
          } catch (err) {
              console.error(err);
          }
      }
  }
  
  function getClientsMeetingCriteria(some_unique_id) {
      var filteredClients = allClients.filter(function(client) {
          return client.id_list.indexOf(some_unique_id) &gt; -1;
      });
      return filteredClients;
  }
  </code></pre>
  
  <p>Now above code (very simplified version of what it is IRL) works well with 100-300 clients, but it becomes too slow for it's purpose with 500+. Problem is that <code>getClientsMeetingCriteria()</code> might be called 10 times per second asynchronously. I need to set up caching with <code>some_unique_id</code> as the key. I have cache code, but I don't know how to store this data in it.. Imagine this:</p>
  
  <ol>
  <li><code>client = {id:1, id_list='123;124;'}</code> is added to <code>clients[]</code></li>
  <li><code>getClientsMeetingCriteria('123')</code> returns <code>[client {id:1...}]</code> and caches the response</li>
  <li><code>delete client[0]</code> is called and client is removed from the <code>clients[]</code></li>
  <li><code>getClientsMeetingCriteria('123')</code> is called again and returns cached <code>[client {id:1...}]</code>, but that entry is no longer in the <code>clients[]</code></li>
  </ol>
  
  <p>I know that JS passes by value in this case (<code>return filteredClients</code>). So far I came up with this: I can actually loop through the array in <code>getClientsMeetingCriteria()</code> and find indexes of the matching clients. I place an array with them (indexes) in cache under <code>some_unique_id</code>. I also keep an array indexed with client_ids with data being list of cached <code>some_unique_id</code> referencing client ids. Before calling <code>delete allClients[index]</code>, I fetch array entry for <code>index</code> and hence get list of cache keys ('some_unique_id') that should be flushed. That seems like a generally big overhead, but it is nothing compared to looping through 1K objects every 100 ms...</p>
  
  <p>Can you think of a better solution? Is there a way to make an object of links to array entries (indexes) which will be up to date - in other words refresh (become null) when index is removed? Something like an iterator.</p>
  
  <p><strong>P.S.</strong> I also realize that I can load the list of client ids from the cache and check if the index exists, but that does not solve the problem with adding a new client that has a matching 'some_unique_id'.</p>