What's the difference between empty items in a JavaScript array and undefined? [duplicate]

Question

Consider the following JavaScript code (in a node REPL):

> let a = new Array(10)
undefined
> a
[ <10 empty items> ]
> a.map(e => 1)
[ <10 empty items> ]
> let b = new Array(10).fill(undefined)
undefined
> b
[ undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined,
  undefined ]
> b.map(e => 1)
[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ]
> 

When I create an empty array, I'll get 'empty items' which seem to behave differently from undefined. Can someone explain what is the difference?

Answer 1

That's because undefined is a value, while when you create an array for example like this:

var array = [];
array.length = 10;
console.log(array);
>(10) [empty × 10] // in google chrome

10 empty slots are created. The empty slot is different from the undefined value, and the most important difference is that the empty slot is not Enumerable.

var mappedArray = array.map(x => 1);
console.log(mappedArray);
>(10) [empty × 10] // in google chrome

Since map function enumerates the values in the orriginal array and returns the array of the same length, it has no effect on the array of 10 empty slots.

Note that empty slots are named differently in different browsers.