title: Why Array.reduce function not called for items pushed into original Array during reduce?
body: <p>Given the following code:    </p>
  
  <pre><code>const ports = [null,3001];
  
  function getPort(port)
  { return new Promise((resolve, reject) =&gt;
    { // setTimeout to simulate getting port from OS
      setTimeout(() =&gt;
      { if(port &lt; 3010)
        { return reject();
        }
        return resolve();
      }, 2000);
    });
  }
  
  ports.reduce(async (acc, port, index) =&gt;
  { if(!port)
    { return;
    }
  
    try
    {
      const avail = await getPort(port);
      return port;
    }
    catch(avail)
    { ports.push(++port);
    }
  });
  </code></pre>
  
  <p>Why is the reduce function only called for elements <code>null</code> and <code>3001</code> and not <code>3002</code> even though at the end of the <code>reduce</code> call the Array <code>ports</code> is equal to <code>[null, 3001, 3002]</code>?</p>
  
  <p>Before the last reduce call completes, the original array already has a new element so why is it not called for that element as well?</p>
  
  <p>The aim of the code is to try and find an available port starting at a given number and increment until we find one, or we hit an upper limit.</p>
  
  <p>There are other ways of doing this, but the <code>reduce</code> method seemed the most succinct until I hit this dead end. </p>