How to empty an array-like object, cross-browser (IE8)?

Question

I have an object which is array-like. This means that it has numeric properties (0, 1, 2...) and a length property.

In its prototype, I declare a method to clear it, like so:

'clear': function() {
    Array.prototype.splice.call(this, 0, this.length);
    return this;
}

This works as expected in most browsers but not Internet Explorer.

Take a perfectly valid array-like object:

var arrayLike = {
    length: 3,
    '0': 'a',
    '1': 'b',
    '2': 'c'
};

And splice it clear:

Array.prototype.splice.call(arrayLike, 0, arrayLike.length);

On a standards compliant browser, this is the correct result:

arrayLike.length ==     0    ;
arrayLike[0]     == undefined;
arrayLike[1]     == undefined;
arrayLike[2]     == undefined;

But in IE 8, this is what you get:

arrayLike.length ==  0 ; // (!!)
arrayLike[0]     == 'a';
arrayLike[1]     == 'b';
arrayLike[2]     == 'c';

Yes, it does not even either work or not, it works as much as it wants to.

Now, I think Array.prototype.splice.call is the only way to clear an array-like object natively. I could polyfill it in a private copy conditionally for IE8, maybe (incurring a one-time performance hit for other browsers, but only once).

Or maybe there is another way of clearing the object? That is also native in IE8? Is there something I'm not seeing?

Ps: JsFiddle for you to run in IE8.

Answer 1

IE is messed up... It seems even if you extend an array object, IE screws up splice. See my testing below:

// create an object constructor
var arrayLike = function() {
    this.clear = function() {
        this.splice( 0, this.length );
    };
};
// use prototypical inheritance to inherit array functionality
arrayLike.prototype = [];
arrayLike.constructor = arrayLike;

// testing clear method fails...
var arrayLikeObject = new arrayLike();
arrayLikeObject.push( 'foo' );
console.log( arrayLikeObject[ 0 ] ); // outputs foo
arrayLikeObject.clear();
console.log( arrayLikeObject[ 0 ] ); // outputs foo

// yet the same method works on a normal array
var test = [];
test.push( 'foo2' );
test.splice( 0, test.length );
console.log( test[0] ); // outputs undefined

what the hell IE...

Answer 2

My gut feeling is that you shouldn't be using Array.prototype.splice.call on an object that isn't an Array. To me, that seems hackish.

Yes, it probably works in most browsers but you're trying to perform an operation designed for one prototype on an object that isn't of that prototype. I'm no fan of IE, but this looks to me like hackery so you can't cry foul when it doesn't work out.

My 2¢ is to either create the new "Array-like" object using Array as the prototype, example:

var ArrayLike = function(){
    this.push.apply(this, arguments);
};
ArrayLike.prototype = Array.prototype;
ArrayLike.constructor = function(){};
ArrayLike.prototype.clear = function(){
    // Array.prototype.splice.call(this, 0, this.length);
    this.splice(0, this.length); // all of Array's methods are available to ArrayLike
    return this;
}

var arrayLike = new ArrayLike('a', 'b', 'c');
console.log(arrayLike.length);  // 3
arrayLike.clear();              // clear
console.log(arrayLike.length);  // 0

...or write your own method.

Answer 3

Man, this is funny. Array.prototype.splice is broken in a very weird way in IE8.

I have to show you this (skip it if you want, solution below).

As you have seen, this will alert "a" in IE, right?

// Create an array-like object.
var arrayLike = {
    length: 1,
    '0': 'a'
};

// Clean it with splice. This should work in ES5.
Array.prototype.splice.call(arrayLike, 0, 2);

// Note that IE does set the length to zero. We need to check an item.
alert(arrayLike[0]);

jsfiddle.

Now, what if we set it to an invalid length? Specifically for this effect, "3" ("2" will produce the same results in IE8).

Now, what does this alert in IE8?

var arrayLike = {
    length: 3,      // <--
    '0': 'a'
};

Array.prototype.splice.call(arrayLike, 0, 2);

alert(arrayLike[0]);

jsfiddle.

In any case, I'm not going to rely on that weird way of working, I don't want to have a horribly strange bug in production. This is how you fix it:

First, you have your code wrapped in an IIFE right? You should. Second, check you have a private copy of Array.prototype.splice. I declare these things at the beginning of my IIFE.

// Call it whatever you want.
var protoSplice = Array.prototype.splice;

Then, on some initialization method (or at any time you want, make sure it's before you use it), call a polyfill method.

polyfill();

Which calls tests and fixes.

function polyfill() {
    // ...
    genericSpliceWorks() || fixGenericSplice();
    // ...
}

Here are the methods it uses:

function genericSpliceWorks() {

    // Create an array-like object.
    var arrayLike = {
    length: 1,
    '0': true
    };

    // Clean it with splice. This should work in ES5.
    protoSplice.call(arrayLike, 0, 2);

    // Note that IE does set the length to 0. We need to check an item.
    return !arrayLike[0];

}

function fixGenericSplice() {

    // Re-set our local protoSplice variable to something that works.
    // Note: this implementation only works with the first two arguments
    // of splice. This means that it does not add extra elements to the
    // array. It's as much as I need.
    protoSplice = function(index, count) {

        // If count is more than zero, run until it's zero, decrementing
        // each time.
        while (count--) {

            // Remove an array item from index, while incrementing index
            // for the next time.
            delete this[index++];

            // Decrement the length.
            this.length--;

        }

    };

}

Ta-da! It works now :)