for...inとfor...ofの違い

個人的には頻繁に誤爆するfor...inとfor...ofの違いです。
雑にまとめると、

• 中身を見たい場合はof
• enumrableなものを読みたい場合はin

といったところでしょうか

実際のところ

基本的な挙動

特に拡張をしていない、ただの文字列の場合を考えます。
配列でも連想配列でも、基本は同じです。

ofは内容を返します。

for (val of "string") { console.log(val) }
/*
s
t
...
g
*/

一方、inの方はインデックスを返します。

for (val in "string") { console.log(val) }
/*
0
1
...
5
*/

妙なことをすると起こる挙動

inの方は、prototypeで拡張したり、独自メソッドを拡張したりすると以下の様な挙動をします。
これは、enamableなものを全て順繰りに実行するからです。
順番はオブジェクトの解決順に従います。
魔界記法を試したいわけでも無い場合は無理に実行することもないでしょう。

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

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

for (let i in iterable) {
  console.log(i); 
}
/* 
0
1
2
"foo"
"arrCustom"
"objCustom"
*/

参考もと

for...of - JavaScript | MDN
for...in - JavaScript | MDN