IE8 enumerating array finds an index for the prototype

Question

i've declared an array:

var employeeBanks = 
[
    { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
    { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
    { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
    { validFromDate: '2013-02-01',    validToDate: '2014-01-31' },
];

When trying to then iterate over every member of the array:

for (var a = 0; a < employeeBanks.length; a++)
{
   ...
}

i get an error, because there is an extra item in my array:

employeeBanks
   [0] = [object]
   [1] = [object]
   [2] = [object]
   [3] = [object]
   [prototype] = [object]

And the 5th element in the array is nothing recognizable. So i get an error. Running IE11 in IE9, IE10, or edge mode, the prototype member does not appear (or does not appear when iterating an array).

What is the recommended technique to only iterate members of an array? Are there any other expected things that might appear in an array without my permission?

Bonus Screenshot:

enter image description here

Full source:

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript">
    var employeeBanks = 
        [
            { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
            { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
            { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
            { validFromDate: '2013-02-01',    validToDate: '2014-01-31' },
        ];
</script>
<body>
<p id="lblFoo">

<script type="text/javascript">
    for (var a = 0; a < employeeBanks.length; a++)
    {
       document.getElementById("lblFoo").innerText = "Test failed";
       document.getElementById("lblFoo").innerText = employeeBanks[a].validToDate;
    }
   document.getElementById("lblFoo").innerText = "Test complete";
</script>
</body>
</html>

Remove <meta http-equiv="X-UA-Compatible" content="IE=8" />, and it works.

How are you getting the elements of the array? If you are using something like employeeBanks[a], I don't see you could possibly access the property "prototype". It's not numeric. — Felix Kling, Nov 21 '13 at 17:09
@FelixKling i don't see how either. Try putting your IE into IE8 document mode. Added failing jsFiddle sample onto accepted answer comment. — Ian Boyd, Nov 21 '13 at 18:07

score 1 · Accepted Answer · answered Nov 21 '13 at 17:07

1

Your extra element is due to the extra comma. Remove the comma before the closing ] and you will have the correct number of elements in your array.

var employeeBanks = 
[
    { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
    { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
    { validFromDate: '2013-01-01',    validToDate: '2013-12-31' },
    { validFromDate: '2013-02-01',    validToDate: '2014-01-31' }
];

answered Nov 21 '13 at 17:07

Tibos

27,507
4
50
64

Why does the extra comma add an element with property name "prototype"? – Felix Kling Nov 21 '13 at 17:12
My guess is that the the weirdness is from the code used to debug the issue. The root cause is still the trailing comma. – Tibos Nov 21 '13 at 17:44
Well i'll be damned. Who'd have thought it. [jsFiddle](http://jsfiddle.net/esAU4/). And who'd have thought that people on stackoverflow would downvote the correct answer without least testing it first. – Ian Boyd Nov 21 '13 at 18:06
@Ian: See http://stackoverflow.com/questions/7246618/trailing-commas-in-javascript. But I would have expected that IE8 throws a syntax error or something like that. – Felix Kling Nov 21 '13 at 18:10
@FelixKling It throws a syntax error for object literals. For arrays it silently adds another `undefined` item at the end. – Tibos Nov 21 '13 at 18:12
@IanBoyd Felix is actually correct, i hadn't given an explanation for the [prototype] stuff because i don't have one. – Tibos Nov 21 '13 at 18:23

IE8 enumerating array finds an index for the prototype

See also

1 Answers1