Javascript .length incorrect in IE

Question

I have an object as follows:

    var dataSources = [
        {
            Stage:  [2, 3, 4],
            Name:   "GetAustralianStateList"
        },
        {
            Stage: [2, 3, 4],
            Name: "GetGenderList"
        },
        {
            Stage: [2, 3, 4],
            Name: "GetTitleList"
        },
        {
            Stage: [2, 3, 4],
            Name: "GetCountryList"
        },
        {
            Stage: [2, 3, 4],
            Name: "GetRegionList"
        },
        {
            Stage: [2, 3, 4],
            Name: "GetNonEnglishLanguageList"
        },
        {
            Stage: [2, 3, 4],
            Name: "GetContactRelationshipList"
        },
        {
            Stage: [3, 4],
            Name: "GetCompanyCodeList"
        },
        {
            Stage: [3, 4],
            Name: "GetBusinessContractList"
        },
        {
            Stage: [3, 4],
            Name: "GetPayrollAreaList"
        },
        {
            Stage: [3, 4],
            Name: "GetAdministrationAreaList"
        },
        {
            Stage: [3, 4],
            Name: "GetWorkContractList"
        },
        {
            Stage: [2, 3, 4],
            Name: "GetFirstLanguageList"
        },
    ];

When I call dataSources.length in Chrome it returns the correct number of items in the object. However Internet Explorer returns a length of 14 - 1 more than is actually in the object.

Any ideas?

Answer 1

Unfortunately you've discovered one of the very few bugs in ECMAScript implementations: IE treats a single trailing comma in an array literal as an elision, so it increments the length by one:

var a = [0,1,];

alert(a.length);  // 3 in IE
                  // 2 in other browsers

a.hasOwnProperty('2'); // false in all browsers

The above shows that IE treats the comma as an elision: the length has been increased by one but there is no member of the array at index 2.

Answer 2

See the , after the last object?

IE sees an elided element because of it.

Answer 3

You should delete the last ",", like this:

    {
        Stage: [2, 3, 4],
        Name: "GetFirstLanguageList"
    }
];

Answer 4

This can also happen when building arrays with 'push'. I've hit it with code like this:

var Entries = new Array;
...some loop that adds entries...
Entries.push( createEntry( values ) );

The createEntry function would do some verification of 'values' array, and if that verification failed, would simply return no value. The undefined value would then be pushed into the Entries array. If this undefined entry were the 'last' value, it would fail in I.E. browsers. To fix it, I used:

var Entries = new Array;
...loop to add entries...
var Entry = createEntry( values );
if( Entry ) Entries.push( Entry );

Basically, don't push stuff into an Array if it is undefined.