title: functional way to iterate over range (ES6/7)
body: <p>What is the best way to do the below in more functional way (with ES6/ES7)</p>
  
  <pre><code>let cols = [];
  for (let i =0; i &lt;= 7; i++) {
     cols.push(i * i);
  }
  return cols;
  </code></pre>
  
  <p>I tried like,</p>
  
  <pre><code>return [ ...7 ].map(i =&gt; {
    return i * i;
  });
  </code></pre>
  
  <p>but that translated to </p>
  
  <pre><code>[].concat(7).map(function (n) {
    return n * n;
  });
  </code></pre>
  
  <p>which is not what I expected.</p>
  
  <h2>EDIT:</h2>
  
  <p>@pavlo. Indeed, that was a mistake. I was using JSX, and for example, I want 7 divs, (untested)</p>
  
  <pre><code>let cols = [];
      for (let i =0; i &lt;= 7; i++) {
         cols.push(&lt;div id={i}&gt; ...  &lt;/div&gt;)
      }
      return cols;
  </code></pre>
  
  <p>so the idea was indeed to reduce the number of temp variables and procedural feel.</p>