title: How do I read this nested function?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var e = 10;
  
  function sum(a) {
      return function(b) {
          return function(c) {
              return function(d) {
                  return a + b + c + d + e;
              }
          }
      }
  }
  
  console.log(sum(1)(2)(3)(4)); //logs 20</code></pre>
  </div>
  </div>
  </p>
  <p>I'm not quite sure how to read this. It was one of the examples in some MDN documentation. Do you think it would be possible to give a step-by-step narration of what's going on?</p>
  <p>Here's what I think is happening:</p>
  <p>I thought <code>sum(1)</code> would return <code>function(b)</code> (which returns <code>function(c)</code> which returns <code>function(d)</code> which returns <code>1 + undefined + undefined + undefined + 10</code>) but this is obviously wrong.</p>