title: Why does the Promise constructor require a function that calls 'resolve' when complete, but 'then' does not - it returns a value instead?
body: <p>As I plunge into studying <code>Promise</code>s, my understanding has halted on the following question that I do not find discussed (all I find are specific discussions of the <code>Promise</code> constructor, and the <code>Promise</code> '<code>then</code>' function - but not a discussion that compares their design patterns).</p>
  <hr />
  <p><strong>1. The <code>Promise</code> constructor</strong></p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="noreferrer">From the MDN documentation</a>, <strong>we have this use of the Promise constructor</strong> (with my comment added):</p>
  <pre><code>new Promise(function(resolve, reject) { ... }); // &lt;-- Call this Stage 1
  </code></pre>
  <blockquote>
  <p>Function object with two arguments <code>resolve</code> and <code>reject</code>. The first
  argument fulfills the promise, the second argument rejects it. We can
  call these functions, once our operation is completed.</p>
  </blockquote>
  <hr />
  <p><strong>2. The <code>then</code> function</strong></p>
  <p><strong>Moving on to the <code>then</code> function</strong> that can be called on a <code>Promise</code> object (which returns a new <code>Promise</code> object), we have <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then" rel="noreferrer">the following function signature as described by the documentation</a> (with my comments added):</p>
  <pre><code>p.then(onFulfilled, onRejected);
  </code></pre>
  <blockquote>
  <p><strong>Chaining</strong></p>
  <p>Because the <code>then</code> method returns a Promise, you can easily chain then
  calls.</p>
  </blockquote>
  <pre><code>var p2 = new Promise(function(resolve, reject) {
    resolve(1); // &lt;-- Stage 1 again
  });
  
  p2.then(function(value) {
    console.log(value); // 1
    return value + 1; // &lt;-- Call this Stage 2
  }).then(function(value) {
    console.log(value); // 2
  });
  </code></pre>
  <hr />
  <p><strong>My question</strong></p>
  <p>From the above code snippet, it seems clear to me that the <strong>value passed to the <code>resolve</code> function in Stage 1</strong> (in the second occurrence of <code>resolve</code> - beneath (2), above) is passed on to the next stage (the first <code>then</code> function that follows in the same code snippet).  <strong>There is no return value at Stage 1.</strong>  However, it is the <em>return value</em> at Stage 2 that is passed on to the next stage after that (the second <code>then</code> function).</p>
  <p>Is this lack of correspondence between the design pattern for the creation of a <code>Promise</code>, and the use of the <code>then</code> function on an existing promise (which also returns a <code>Promise</code>), just a historical fluke (one requires calling a callback but returns nothing, and the other returns a value but does not call a callback)?</p>
  <p>Or am I missing an underlying reason why the <code>Promise</code> constructor utilizes a different design pattern than the <code>then</code> function?</p>