title: Why .then(resolveCallback, rejectCallback) behaving differently from .then(resolveCallback).catch(rejectCallback) in polyfill of Promise.race?
body: <p>I was writing polyfill for Promise.race() method using the below code snippet.</p>
  <pre><code>const promise = new Promise((resolve, reject) =&gt; {
    resolve('promise resolved');
  });
  
  const promise2 = Promise.resolve('promise2 resolved');
  
  function raceCopy(promises) {
    return new Promise(function (resolve, reject) {
      for (var index = 0; index &lt; promises.length; index++) {
          Promise.resolve(promises[index])
            .then(resolve)
            .catch(reject);
      }
    });
  }
  
  raceCopy([Promise.reject('copy rejected'), promise, promise2])
    .then((response) =&gt; console.log(response))
    .catch((error) =&gt; console.error(error));
  
  </code></pre>
  <p>But instead of giving the error &quot;copy rejected&quot; in the console, it is showing &quot;promise resolved&quot;. I do not understand How and Why it is working like this?</p>
  <p><strong>What I tried?</strong></p>
  <ol>
  <li>I used the existing Promise.race() API, and it is giving me the correct result &quot;copy rejected&quot;.</li>
  </ol>
  <pre><code>Promise.race([Promise.reject('copy rejected'), promise, promise2])
   .then((response) =&gt; console.log(response))
   .catch((error) =&gt; console.error(error));
  </code></pre>
  <ol start="2">
  <li>Second, I changed the implementation of the <code>raceCopy()</code>. Something like this,</li>
  </ol>
  <pre><code>function raceCopy(promises) {
    return new Promise(function (resolve, reject) {
      for (var index = 0; index &lt; promises.length; index++) {
        Promise.resolve(promises[index]).then(resolve, reject);
      }
    });
  }
  </code></pre>
  <p>And It is also giving the correct result.</p>
  <p><strong>What I'm not understanding?</strong>
  If all the implementations are the same then Why are the results not the same for all? What am I missing here?</p>