Bucles for en

Acerca de Bucles for

Sintaxis general

El bucle for es una de las instrucciones más usadas para ejecutar repetidamente una misma lógica. En JavaScript, consta de la palabra clave for, una cabecera entre paréntesis y un bloque de código que contiene el cuerpo del bucle entre llaves.

for (initialization; condition; step) {
  // code that is executed repeatedly as long as the condition is
  // true
}

Cabecera

La inicialización normalmente configura una variable contador, la condición comprueba si el bucle debe continuar o detenerse, y el paso incrementa el contador al final de cada repetición. Las distintas partes de la cabecera se separan con punto y coma.

const list = ['a', 'b', 'c'];
for (let i = 0; i < list.length; i++) {
  // code that should be executed for each item in the array
}

Las tres partes de la cabecera son opcionales. En la práctica, rara vez se utiliza. Puedes leer más sobre esto en la documentación de MDN.

Bucles for anidados

Los bucles for se pueden anidar, por ejemplo para recorrer arrays anidados (multidimensionales). Asegúrate de configurar una variable contador distinta para cada bucle.

const coords = [
  [1, 2],
  [4, 7],
  [10, -3],
];

for (let i = 0; i < coords.length; i++) {
  for (let j = 0; j < coords[i].length; j++) {
    // do something with coords[i][j]
  }
}

break, continue y etiquetas

Dentro del cuerpo de un bucle, puedes usar la palabra clave break para detener por completo la ejecución del bucle. Por el contrario, la palabra clave continue solo detiene la ejecución de la iteración actual y continúa con la siguiente.

Cuando trabajas con bucles anidados, break y continue se aplican siempre al bucle más interno de forma predeterminada. Puedes usar etiquetas para cambiar ese comportamiento. Una etiqueta es un nombre seguido de dos puntos. Se coloca delante del bucle (o encima de él). Esa etiqueta se puede combinar después con break o continue para definir a qué bucle debe aplicarse la instrucción.

outer: for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 10; j++) {
    // ...
    if (j > 5) {
      continue outer;
    }
    // ...
  }
}

Contador del bucle y código asíncrono

Debes tener cuidado de declarar correctamente tu variable contador cuando trabajas con código asíncrono. Veamos un ejemplo en el que sumamos la variable contador de forma asíncrona con setTimeout tras esperar 1 segundo. Si declaras el contador con var o con let, pero fuera de la cabecera, el código no da el resultado esperado.

let sum = 0;
for (var i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 12 instead of 6 (1+2+3)

let sum = 0;
let i;
for (i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// same here, eventually sum will be 12 instead of 6 (1+2+3)

En estos dos casos, i no está limitado al scope de una iteración concreta del bucle. Cuando se calcula la suma, i ya ha alcanzado su valor final 4, lo que hace que la suma sea 4 + 4 + 4 = 12.

Este problema se puede evitar declarando el contador con let dentro de la cabecera. Esto tiene el efecto especial de que cada iteración obtiene su propia variable let i, limitada al scope de esa única ejecución del cuerpo del bucle. Así, cuando la suma se calcula más tarde, cada función callback se refiere a su propia variable i, que todavía contiene el valor correcto.

let sum = 0;
for (let i = 1; i < 4; i++) {
  setTimeout(function () { sum += i; }, 1000);
}
// eventually sum will be 6 (1+2+3) as expected