Why does delete keep Array elements?

Question

Today I stumbled upon a question here on Stack Overflow - How do I remove objects from a javascript associative array?. What struck me was that the accepted answer was both misleading and heavily upvoted, so I highlighted the possible pitfall.

However, while cobbling together a corrective answer, I realized I have no idea as to why it makes sense for delete to keep elements assign undefined instead of removal.

var elements = new Array()
elements.push(NaN)
elements.push(NaN)
elements.push(NaN)
delete elements[1]
console.log("number of elements: ", elements.length)   // returns 3

Is there a rationale behind it?

Answer 1

I realized I have no idea as to why it makes sense for delete to assign undefined instead of removal.

It doesn't. delete removes properties from objects, it does not set them to undefined. Here's an easy way to tell:

var a = ['a', 'b', 'c'];
console.log(1 in a); // logs "true"
delete a[1];
console.log(1 in a); // logs "false"

Note that after the delete, a doesn't have a property called 1 anymore. At all.

Contrast with:

var a = ['a', 'b', 'c'];
console.log(1 in a); // logs "true"
a[1] = undefined;
console.log(1 in a); // logs "true"

There, a still has a property called 1, it's just that the property's value is undefined.

It's useful to understand that in JavaScript, arrays aren't really arrays at all. They're just objects, array "indexes" are just property names (which are strings — yes, really, we just tend to write them as numbers), arrays have special handling of property names that are all numeric (indexes), a special length property, and some functions they get from Array.prototype. This is very clearly laid out in Section 15.4 of the spec. Once you have it set firmly in your head that JavaScript arrays aren't really arrays, they make a lot more sense. :-)

Deleting an array "index" property from an array does not change its length (not even if you delete the highest-numbered one); it just creates a hole in the array (JavaScript "arrays" are sparse arrays by their nature; e.g., they can have gaps in them). So in my first example above, I get exactly the same array that I'd've gotten if I'd done this:

var a = [];
a[0] = 'a';
a[2] = 'c';

Note the gap, the array has no 1 element/property.

If you say:

var foo = a[3];

...foo can get the value undefined for two completely different reasons:

1. a has a property called 3 that has the value undefined, or:
2. a has no property called 3 at all; the result of a property accessor operation on an object that doesn't have a property by that name is undefined. This if-no-property-return-undefined is covered by the spec in a fairly convoluted way, but mostly in Section 8.12.3.

These are very distinct things.