Bucles con for

En la cuenta atrás con while tuviste que hacer tres cosas en tres sitios distintos: crear la variable, escribir la condición y acordarte de actualizarla. El bucle for hace exactamente lo mismo, pero con todo junto en una sola línea.

Por eso es el bucle perfecto cuando quieres repetir algo un número determinado de veces. Y con todo a la vista, es mucho más difícil olvidarte de la actualización y acabar en un bucle infinito.

Esta es su sintaxis:

for (inicialización; condición; actualización) {  // código a ejecutar}

Fíjate en que dentro de los paréntesis hay tres partes separadas por ;:

• La inicialización se ejecuta una sola vez, antes de que empiece el bucle. Se usa para declarar variables y darles su valor inicial.
• La condición es una expresión booleana que se evalúa antes de cada iteración. Si es true, se ejecuta el código del bucle. Si es false, el bucle termina.
• La actualización se ejecuta después de cada iteración. Normalmente incrementa o decrementa la variable de control del bucle.

Ejemplo de uso de for#

Vamos a imprimir los números del 1 al 10. Intenta localizar las tres partes antes de seguir leyendo:

for (let number = 1; number <= 10; number++) {  console.log(number)}

¿Las tienes?

• La inicialización es let number = 1: creamos la variable number con el valor 1.
• La condición es number <= 10: mientras se cumpla, el bucle sigue iterando.
• La actualización es number++: suma 1 a number después de cada iteración.

Oh, espera, ¿qué es eso de number++? Te lo explico.

Incrementando números con ++#

El operador ++ incrementa en 1 el valor de una variable numérica. Si i vale 5, después de i++ pasa a valer 6:

let i = 5i++console.log(i) // -> 6

Es una forma abreviada de escribir i = i + 1. Y como en los bucles estás sumando uno constantemente, es lo que verás en casi todos los for.

Iterando al revés#

El bucle for también puede contar hacia atrás. Solo tienes que cambiar tres cosas: empezar por el número más alto, darle la vuelta a la condición y usar i-- en lugar de i++ en la actualización.

¿Te acuerdas del cohete? Así queda su cuenta atrás con for:

for (let i = 10; i >= 0; i--) {  if (i === 0) {    console.log('¡Despegue 🚀!')  } else {    console.log('Faltan ' + i + ' segundos')  }}

Igual que ++ suma uno, -- lo resta. El bucle va del 10 al 0 y, al llegar a 0, en lugar de los segundos muestra el mensaje de despegue.

Llevando más allá el bucle for#

Los ejemplos con for suelen ser siempre los mismos, pero en la inicialización, la condición y la actualización puedes poner lo que quieras. Por ejemplo, usar dos variables a la vez:

for (let i = 0, j = 5; i < 5; i++, j--) {  console.log(i, j)}

Mientras i sube de 0 a 4, j baja de 5 a 1. La coma , es la que lo hace posible: en la inicialización separa las dos variables que declaramos y en la actualización nos deja modificar las dos.

En la actualización, la , es un operador que evalúa cada uno de sus operandos (de izquierda a derecha) y devuelve el valor del último.

No es muy común verlo, pero es bueno saber que existe.

continue y break#

Igual que en while, dentro de un for puedes usar las palabras reservadas continue y break para controlar el flujo del bucle.

En este ejemplo usamos los dos. Antes de leer la explicación, intenta adivinar qué números aparecen en la consola:

for (let i = 0; i < 10; i++) {  const esPar = i % 2 === 0  if (esPar) {    continue  }  // Solo mostramos este console.log si es impar  console.log(i)  // Salimos del bucle al llegar al 7  if (i === 7) {    break  }}

Aparecen 1, 3, 5 y 7. Los pares se saltan con continue y, al llegar al 7, el break termina el bucle antes de que le toque al 9.

Hay una diferencia con while que te va a gustar: con continue, la actualización i++ se ejecuta igualmente. No hay riesgo de quedarte atascado en la misma vuelta.

Bucles anidados con for#

Imagina que quieres crear las tablas de multiplicar del 1 al 10. Necesitas un bucle que recorra los números del 1 al 10 y, por cada uno de ellos, otro bucle que lo multiplique por los números del 1 al 10. Es decir, dos for anidados, uno dentro del otro:

for (let i = 1; i <= 10; i++) {  for (let j = 1; j <= 10; j++) {    const resultado = i * j    console.log(i + ' x ' + j + ' = ' + resultado)  }}

Por cada valor de i, el bucle de dentro da sus diez vueltas completas con j. En total, 100 multiplicaciones con solo seis líneas de código.

for (let i = 0, i < array.length, i++) {  // código a ejecutar en cada iteración}

for (let i = 0; i < array.length; i++) {  // código a ejecutar en cada iteración}