title: Using Array.map with new Array constructor
body: <p>I was trying to use <code>new Array()</code> constructor with <code>map</code> in order to create a one-line code that creates a list of elements. Something like this : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let arr = new Array(12).map( (el, i) =&gt; {
    console.log('This is never called');
    return i + 1;
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Reading <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noreferrer">docs</a>, the behaviour makes sense. </p>
  
  <blockquote>
    <p>Basically docs say that callback of map will be executed even for declared undefined values in array, but not for example when creating empty Arrays like the code before.</p>
  </blockquote>
  
  <p>So this should work :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var arr = new Array(12);
  
  for(let i = 0; i &lt; arr.length ; i++){
    arr[i] = undefined;
  }
  
  let list = arr.map( (e, i) =&gt; {
    console.log(i + 1);
    return i + 1;
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, We also can do something like this :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let newArray = (length) =&gt; {
    let myArray = new Array(length);
    for(let i = 0; i &lt; length; i++) myArray[i] = undefined;
    return myArray;
  };
  
  console.log( newArray(12).map( (el, i) =&gt; i + 1 ) );</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>So my question. Is there a better/pretty way to do it with map function ?</strong></p>
  
  <p>Thanks in advance!</p>