0

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)
Yvan Pearson
  • 319
  • 4
  • 6
  • 1
    explain what you mean by using map on `Array(5)` – smac89 Mar 03 '21 at 01:26
  • 2
    `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. `map` skips over empty elements. – Heretic Monkey Mar 03 '21 at 01:30
  • 1
    Does this answer your question? [Array.map doesn't seem to work on uninitialized arrays](https://stackoverflow.com/questions/20333654/array-map-doesnt-seem-to-work-on-uninitialized-arrays) – Heretic Monkey Mar 03 '21 at 01:30
  • The accepted answer in your linked question is actually not true, map doe snot skip over `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 from `undefined`. See my answer below. @HereticMonkey – Nick Mar 03 '21 at 01:37
  • this seems like a complete valid question, idk why it got closed, im voting for reopen – Vitim.us Mar 03 '21 at 01:38
  • @gpt I don't know why you tagged me in your comment. My comment says that `map` skips over **empty** elements. There are also *seven other answers* on the question which answer this question. There is no need for yet another answer to the same question. – Heretic Monkey Mar 03 '21 at 01:41
  • @Vitim.us It's a valid question, but it's a duplicate. Why reopen only to close it again? – Heretic Monkey Mar 03 '21 at 01:42
  • I tagged you because the accepted answer in your linked question says "`.map` will skip over undefined values :(", misleading answer. – Nick Mar 03 '21 at 01:42
  • @HereticMonkey if its a duplicate it should be marked as such, not closed as invalid question. – Vitim.us Mar 03 '21 at 01:43
  • @gpt But there are several other answers on that question, and *you can edit the answer* if you find it misleading. – Heretic Monkey Mar 03 '21 at 01:43
  • @Vitim.us It's not closed as an "invalid question"; there is no such close reason. It's closed as lacking details and clarity. As the first comment asks, what is meant by using map on `Array(5)`. If the OP simply edited their question to answer that clarification, it would not be closed. – Heretic Monkey Mar 03 '21 at 01:46
  • I disagree that the question is unclear, maybe the title is vague. But it is very obvious he is questioning why both constructs doesn't behave the same even tho a lot of people would expect them to behave the same. – Vitim.us Mar 03 '21 at 01:50
  • 1
    Hopefully this question was clarified. I'm assuming this is easy for full time javascript developers. @Vitim.us – Yvan Pearson Mar 03 '21 at 05:36

1 Answers1

1

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

Nick
  • 1,161
  • 1
  • 12
  • 22