I have an array like this:

let arr = ["zero", "one", "two"]; // I'm an indexed array!
arr.foo = "bar";

If I try accessing arr.foo, it's accessible:

console.log(arr.foo); // Returns "bar"

However, if I loop over this array with for loop like this:

for (let i = 0; i <= arr.length; i++) {
  console.log(`${i} => ${arr[i]}`);
}

I get this:

0 => zero
1 => one
2 => two
3 => undefined

Also, if I use for in loop like this:

for (let y in arr) {
  console.log(y);
}

I get indexes, including foo:

0
1
2
foo

But if I use for of like this:

for (let z of arr) {
  console.log(z);
}

I get this:

zero
one
two

So foo value is missing in both for and for of loops!

Question is, why is foo inaccessible inside of these loops? Why does it say its undefined, when I can access it using arr.foo?