Why does looping an array containing objects not return the object?

Question

I have a simple array containing objects:

arr = [{"key": "foo"}, {"key": "bar"}]

If I loop it I should get a list of objects, but the result is just:

for (i in arr) {console.log(i)}
0
1

What's stranger is that if I'm lazy and not using console.log, the result is different:

for (i in arr) {i}
"1"

There is a lot of answers in How to loop through an array containing objects and access their properties. That is, I can use forEach() and get the expected result:

arr.forEach(i=>console.log(i) ) 
{key: "foo"}
{key: "bar"}

But that is how to fix it. I want to know why this happens.