What is the difference between for in and for of statements

Question

I'm familiar with a for... in loop (it iterates over the keys), but this is the first I've heard of a for... of loop (it iterates over values).

I don't understand the for...of loop.

var arr = [3, 5, 7];
arr.foo = "hello";
    
for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}
    
for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it doesn't log "3", "5", "7", "hello"
}

I realize that for... of property values iterates. 

So why does it log "3", "5", "7", and "hello" instead of "3", "5", "7"?

Contrary to the for... in loop, which iterates over each key (such as "0," "1," "2," and "foo") as well as the foo key, the for... of loop does not iterate over the value of the foo property, i.e., "hello." 

Why is it the case?

For... of loop, I console here. 

"3", "5", "7," and "hello" are logged instead of "3", "5", and "7." 

Why?