for in loop weird behavior

Question

I've got some weird behavior with a for-in loop.

Code:

var obj = {
    q:1,
    w:2,
    e:4,
    r:5
};

function test(data) {
    for (key in data) {
        //do sth;
    }
}

!function() {
    for (key in obj) {
        console.log(key);
        test({a:1,b:2,c:3});
        console.log(key);
    }
}();

as i expected the output should be sth like this:

q q w w e e r r

but i got this:

q c w c e c r c

i can't find the logic behind this behavior! the key variables are scoped lexically ! what's worng with my code?

Remember to `let` or `var` any identifiers at the level you want them — Paul S., Jul 15 '16 at 22:33

score 3 · Accepted Answer · answered Jul 15 '16 at 22:32

You need to declare key with var in both functions. Currently, it's an implicit global variable.

function test(data){
    for (var key in data){
        //do sth;
    }
}

Because it's global, references to key in both function involve the same variable, so the loop in test() messes up the loop in the anonymous function.

(You could use let instead of var if you wanted to, though in this case it would make no difference.)

for in loop weird behavior

1 Answers1