How does ... Loop Statement work in Javascript? (ECMAScript 6)

I have a snippet that I am experimenting with an expression for...of

on it:

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

      

        
        
        
      

    

My question is what for...of

should work on iterables, right? so why for

doesn't the second one print "hello"

?