The question is, what is the difference between Array(5) and [...Array(5)] See below variable c and d is the same yet .map treats it differently.
let a = [...Array(5)].map((k,i)=>{
console.log("Hello");
return i;
})
console.log(a);
let b = Array(5).map((k,i)=>{
console.log("Hello");
return i;
})
console.log(b);
let c = Array(5)
let d = [...Array(5)]
console.log(c) // c and d seem to be the same
console.log(d)
Because when you directly call Array(5), it creates an empty array, not an array with 5 undefined. This is why nothing happens when you call map because there is nothing for it to iterate over, so it immediately returns.
If the only argument passed to the Array constructor is an integer between 0 and 232-1 (inclusive), this returns a new JavaScript array with its length property set to that number (Note: this implies an array of arrayLength empty slots, not slots with actual undefined values). If the argument is any other number, a RangeError exception is thrown.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array
Array(5)Array(5)returns an array with an initial capacity of 5 elements, all of which are empty.[...Array(5)]returns an array with 5 undefined elements.mapskips over empty elements.undefined, this snippet works just fine:[undefined].map(() => {console.log('ayo')}). It specifically does not run in this case because it's empty slots, which is different fromundefined. See my answer below. @HereticMonkey