javascript - How to tell between undefined array elements and empty slots?

Question

Suppose I am a user script developer and I don't have control over the on-page javascript. The page creates arrays with random lengths, filling them with random values (including falsy ones, such as undefined). Not every element has to be assigned a value, so there may be empty slots.

A simplified example (Firefox console):

var arr = new Array(3);
arr[0] = null;
arr[1] = undefined;
console.log(arr);               \ Array [ null, undefined, <1 empty slot> ]
console.log(arr[1]);            \ undefined
console.log(arr[2]);            \ undefined
console.log(arr[1] === arr[2]); \ true
console.log(typeof arr[1]);     \ undefined
console.log(typeof arr[2]);     \ undefined

As we can see, Firefox displays undefined and empty slots differently, whereas for javascript they seem to be identical.

Now suppose I want to clean such an array, removing all empty slots but leaving undefined elements intact. How do I do that?

Answer 1

You can use the in operator to check if the array has a key. It will return false for empty slots, but true for slots with values, including the value undefined:

var arr = new Array(3);
arr[0] = null;
arr[1] = undefined;

1 in arr; // true
2 in arr; // false

Note that you can't distinguish between empty slots and slots past the end of the array using that, but if you know the length of the array, then you already know that 3 isn't part of it, so you don't need to test 3 in arr.

You can also filter out the empty slots like this:

arr = arr.filter( ( _, i ) => i in arr );