¿Cuál es la diferencia entre los bucles for...in y for...of?

El ciclo for...in itera sobre las claves (propiedades) de las propiedades enumerables del objeto, incluyendo las propiedades de su cadena de prototipos.

El ciclo for...of itera sobre los valores de los objetos iterables (Array, Map, Set, String, arguments, etc.). No itera sobre las propiedades del prototipo.

	for...in	for...of
Itera sobre	Claves (propiedades) de objetos	Valores de objetos iterables
Se usa con	Objetos	Arrays, cadenas, Map, Set y otros objetos iterables
Prototipo	Itera sobre las propiedades del prototipo	No itera sobre las propiedades del prototipo
Orden de recorrido	No garantizado para claves no enteras	Garantizado para arrays (por índice)

Ejemplo for...in:

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // Imprime: "a 1", "b 2"
}

Ejemplo for...of:

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // Imprime: 1, 2, 3
}

En general, para recorrer arrays y estructuras similares, es preferible usar for...of, y para recorrer propiedades de objetos, for...in (a menudo en combinación con hasOwnProperty para excluir propiedades del prototipo).