Using Array.map with new Array constructor
<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>