Iterating thru Object properties produces different results in different browsers

Question

I am creating a very basic object in JavaScript and looping thru its properties, displaying property name:

var name = {
                'A': 'DataA',
                'B': 'DataB',
                'C': 'DataC',
                'D': 'DataD',
                'E': 'DataE'
            }

for (var propName in name) {
    document.getElementById('result').innerHTML += propName + '&nbsp;'
}

In IE and FireFox it produces expected result:

A B C D E

But in Chrome same code produces

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Any idea why? Does keyword name hold some significance in Chrome?

JSFiddle for some reason doesn't show the effect, but when I open HTML page with code in browser directly - this happens — Yuriy Galanter, Jun 15 '13 at 00:47
Chrome doesn't seem to like it when you use it as a global (there's a name property on the window object). Just run it inside a function. — zdyn, Jun 15 '13 at 00:49
@zdyn That was it! Apparently `name` in Chrome is `[Object, Object]` this is where where these properties come from. Weird stuff. Running it with a private `name` variable works. If you post this as an answer I will accept it. — Yuriy Galanter, Jun 15 '13 at 00:53
@zerkms Yes, your fiddle is wrapping the code in a function, that's why it doesn't break, see http://jsfiddle.net/cqvrF/2/ You have to choose the nowrap option... — Ruan Mendes, Jun 15 '13 at 01:07

score 4 · Accepted Answer · answered Jun 15 '13 at 00:55

4

Chrome doesn't seem to like it when you use it as a global variable (there's also a name property on the window object). Just run it inside a function.

answered Jun 15 '13 at 00:55

zdyn

2,155
1
15
17

score -5 · Answer 2 · answered Jun 15 '13 at 00:43

-5

try

for (var propName in name) {
    document.getElementById('result').innerHTML += (propName + '&nbsp;');
}

answered Jun 15 '13 at 00:43

Axel Amthor

10,980
1
25
44

2

What do you think it would change (for *working* code)? Please have a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence before you delete your answer :-) – zerkms Jun 15 '13 at 00:44
The thing is, when I debug the page `propName` does show those numbers – Yuriy Galanter Jun 15 '13 at 00:49
I'm not going to delete that since it MAKES a difference – Axel Amthor Jun 15 '13 at 00:55
@Axel Amthor: please explain what difference it makes – zerkms Jun 15 '13 at 01:02
@AxelAmthor -1 It does not make a difference – Ruan Mendes Jun 15 '13 at 01:09
as you might have seen, browsers do not always tightly stick to the reference of JS, it depends. Even with IE and Chrome its more or less a try and error whether things work or not. I've just tried to check the above with jsfiddle on IE - jsfiddle doesn't work in my IE 8 on XP :-/. "Reserved" words like "name" or "form" i.e. I only know from causing problems in IE, not in Chrome (yet). So I agree, it was a guess, but pointing me to the JS reference is somewhat offending. If all browsers would implement that properly, we would have 50% less questions over here. – Axel Amthor Jun 15 '13 at 01:12
Browsers implement operator precedence correctly. Browser incompatibility stems mainly from the DOM API, occasionally from the native API, and almost never from the basic language syntax, aside from a few edge cases here and there. If you're inclined to be offended by someone offering you helpful documentation, then don't post answers that have no basis in reality. – Jun 15 '13 at 01:56

Iterating thru Object properties produces different results in different browsers

2 Answers2