Patrón moderno de bucles: for...of y entries

Al finalizar este tema

Comprenderá las diferencias entre for...of, for...in y forEach, y podrá seleccionar el bucle adecuado según el contexto.

No utilice for...in con arrays

const fruits = ["apple", "banana", "cherry"];

for (const i in fruits) {
  console.log(i); // "0", "1", "2" — los índices son cadenas
}

for...in recorre las claves de un objeto. Si se usa en un array, devuelve los índices como cadenas. Puede recorrer también las propiedades de la cadena de prototipos, lo que puede producir resultados inesperados.

for...of recorre los valores

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit); // "apple", "banana", "cherry"
}

for...of recorre directamente los valores de un iterable. Se puede utilizar con arrays, cadenas, Map y Set, entre otros.

for (const char of "hello") {
  console.log(char); // "h", "e", "l", "l", "o"
}

Si necesita el índice, use entries()

for...of proporciona solo los valores. Si necesita el índice, use entries():

const fruits = ["apple", "banana", "cherry"];

for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}
// 0: apple
// 1: banana
// 2: cherry

La desestructuración permite recibir el índice y el valor simultáneamente. Cumple una función similar a la de enumerate() en Python.

forEach frente a for...of

// forEach
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

// for...of
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}

Aunque parecen similares, hay una diferencia importante:

forEach no se puede detener en medio. break y return no logran romper el bucle completo (return solo termina la devolución de llamada actual).

// for...of — permite break
for (const fruit of fruits) {
  if (fruit === "banana") break;
  console.log(fruit); // Solo imprime "apple"
}

// forEach — no permite break
fruits.forEach(fruit => {
  if (fruit === "banana") return; // Omite solo esta llamada al callback
  console.log(fruit); // Imprime "apple" y "cherry"
});

Si se detiene en el medio, use for...of; para recorrer todo, utilice forEach o map.

Recorrido de objetos

Los objetos normales no pueden ser recorridos directamente con for...of. Utilice Object.entries():

const user = { name: "Alice", age: 25, city: "Seoul" };

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}
// name: Alice
// age: 25
// city: Seoul

Object.keys() devuelve solo las claves; Object.values(), solo los valores.

Puntos clave

for...in recorre las claves de un objeto; for...of, los valores de un iterable. Si necesita el índice de un array, utilice entries(). Si necesita interrumpir el recorrido con break, utilice for...of; para recorrerlo completo, forEach es apropiado.