Ciclo for...of — JS: Arrays

• ¿Cómo funciona for...of?
• Sumar valores de un array
• Iterar sobre una cadena de texto
• Cuándo usar for en lugar de for...of

Cuando trabajamos con listas de elementos, a menudo necesitamos recorrerlas de principio a fin. Hasta ahora, hemos usado el bucle for tradicional, donde definimos un contador, establecemos una condición de finalización y modificamos el contador en cada repetición.

Sin embargo, en muchos casos, sería más práctico recorrer los elementos sin preocuparnos por los índices. Para esto, JavaScript nos ofrece una herramienta más sencilla y clara: el bucle for...of.

¿Cómo funciona for...of?

⏬ Veamos un ejemplo:

const userNames = ['Carlos', 'María', 'José'];

// Recorremos cada elemento del array sin usar un índice
for (const name of userNames) {
  console.log(name);
}
// => "Carlos"
// => "María"
// => "José"

¿Qué está pasando aquí?

1. Se declara una variable name dentro del bucle con const.
2. En cada repetición, name toma el valor de un elemento del array userNames.
3. El bucle finaliza automáticamente cuando ha recorrido todos los elementos.

Como podemos ver, el código es más limpio y fácil de entender en comparación con el for tradicional.

Sumar valores de un array

Una tarea común es sumar los elementos de una lista de números. Con for...of, esto se vuelve bastante simple:

const calculateSum = (coll) => {
  let sum = 0;
  for (const value of coll) {
    sum += value; // Acumulamos los valores en sum
  }
  return sum;
};

console.log(calculateSum([1, 2, 3, 4])); // => 10

Iterar sobre una cadena de texto

Además de los arrays, for...of también funciona con cadenas de texto. Recorre la cadena letra por letra:

const greeting = 'Hola';

for (const letter of greeting) {
  console.log(letter);
}
// => "H"
// => "o"
// => "l"
// => "a"

Aunque una cadena pueda parecer un array de caracteres, no es realmente un array. Solo se comporta de manera similar cuando usamos for...of.

Cuándo usar for en lugar de for...of

A pesar de sus ventajas, for...of no es adecuado para todas las situaciones. En algunos casos, seguimos necesitando un for tradicional.

Recorrer solo algunos elementos(ejemplo: cada dos elementos)

Si necesitamos saltarnos elementos, for...of no nos permite hacerlo fácilmente. Aquí es mejor usar for:

for (let i = 0; i < userNames.length; i += 2) {
  console.log(userNames[i]); // Se imprimen solo los elementos en posiciones pares
}

Recorrer un array en orden inverso

Si deseamos recorrer una lista en sentido contrario, for...of tampoco nos sirve:

for (let i = userNames.length - 1; i >= 0; i -= 1) {
  console.log(userNames[i]);
}

Recorrer un rango de números sin un array

A veces, necesitamos repetir una acción varias veces sin depender de una colección preexistente. En ese caso, for es más adecuado:

for (let i = 5; i < 10; i += 1) {
  console.log(i); // Se imprimen los números del 5 al 9
}

Modificar un array mientras se recorre

Si queremos actualizar los valores de un array durante la iteración, for...of no es la mejor opción, ya que no accedemos al índice. En su lugar, usamos for:

for (let i = 0; i < userNames.length; i += 1) {
  userNames[i] = userNames[i].toUpperCase(); // Convertimos los nombres a mayúsculas
}
console.log(userNames);
// => ["CARLOS", "MARÍA", "JOSÉ"]

Los bucles son una base clave en la programación. Si los dominas bien, te será mucho más fácil entender herramientas más avanzadas más adelante. ¡Sigue practicando!

Materiales adicionales

1. for...of / MDN Web Docs