ES6でのfor...in文とfor...of文の違いについて

ES6(ES2015)を勉強していて衝撃だったのがfor...in文という仕様。すいません、今まで明確に仕様を知りませんでした・・・。

ソースはMozzilaからの引用です。

[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of#for...ofとfor...in_との違い:embed:cite]

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

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

for (let i in iterable) {
  console.log(i); 
}

皆さん、これ何が出力されると思います？ 私は、

3
5
7

と出力されると思いました。

違うんです。

0
1
2
"foo"
"arrCustom"
"objCustom"

と出力されるんです。 for...in文は、

オブジェクトの列挙可能なプロパティに対し任意の順番で反復処理を行います。それぞれ個別のプロパティに対し、文を実行できます。

というものなので、プロパティが列挙される出力になります。

ちなみに3, 5, 7と表示させたければ、for...of文を使います。

for (let i of iterable) {
  console.log(i);
}

間違いが多くなりそうなので、今後はfor...of文を基本に、私は使っていきたいと思います。