for...of, for...in, break y continue

Recorrer colecciones

La mayoría de las veces no quieres contar números pelados, sino pasar por los elementos de una lista: los productos de un carrito, los nombres de un grupo, las letras de una palabra. Para eso existen versiones del for mucho más cómodas, que se leen casi como una frase.

for...of: recorre los valores

Ideal para arrays y strings. En cada vuelta te da directamente el elemento:

const frutas = ["manzana", "pera", "uva"];
for (const fruta of frutas) {
  console.log(fruta);
}
// "manzana", "pera", "uva"

También funciona con strings, carácter a carácter:

for (const letra of "abc") {
  console.log(letra); // "a", "b", "c"
}

for...in: recorre las claves/índices

Pensado para objetos, donde te da el nombre de cada propiedad:

const persona = { nombre: "Ana", edad: 25 };
for (const clave of persona) {} // ❌ esto NO
for (const clave in persona) {
  console.log(clave, "=>", persona[clave]);
}
// "nombre => Ana", "edad => 25"

Truco para no liarte: of es para "dame los valores" de arrays/strings; in es para "dame las claves" de objetos. Si los confundes, no pasa nada: hasta los veteranos lo dudan a veces.

Controlar el flujo: break y continue

• break sale del bucle inmediatamente.
• continue salta a la siguiente vuelta, ignorando el resto del cuerpo.

for (let i = 1; i <= 10; i++) {
  if (i === 5) break;     // al llegar a 5, paramos del todo
  if (i % 2 === 0) continue; // ignora los pares
  console.log(i);          // imprime 1, 3
}

Ejemplos

Recorrer un array con for...of

const colores = ["rojo", "verde", "azul"];
for (const color of colores) {
  console.log(color.toUpperCase());
}

Saltar y parar con continue y break

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) continue; // salta pares
  if (i > 5) break;          // al llegar a 7, para del todo
  console.log(i);            // imprime 1, 3, 5
}