Bucles `for` en

Acerca de Bucles `for`

Sintaxis general

El bucle for es una de las sentencias más usadas para ejecutar lógica de forma repetida. En JavaScript, consta de la palabra clave for, un encabezado 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
}

Encabezado

Por lo general, la inicialización prepara una variable contador, la condición verifica si el bucle debe continuar o detenerse, y el paso incrementa el contador al final de cada repetición. Las distintas partes del encabezado 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 del encabezado son opcionales. Esto se usa pocas veces en la práctica. Puedes leer más sobre esto en la documentación de MDN.

Bucles for anidados

Los bucles for se pueden anidar, por ejemplo, para iterar sobre arrays anidados (multidimensionales). Asegúrate de definir 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. En cambio, 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 de identificador seguido de dos puntos. Se coloca delante del bucle (o encima de él). Luego puedes combinar esa etiqueta con break o continue para definir a qué bucle debe aplicarse la sentencia.

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

El contador del bucle y el 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 después de esperar 1 s. Si declaras el contador con var, o con let pero fuera del encabezado, el código no produce 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 tiene el ámbito de una iteración específica del bucle. Para cuando se calcula la suma, i ya alcanzó 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 del encabezado. Esto tiene el efecto especial de que cada iteración obtiene su propia variable let i, cuyo ámbito corresponde exactamente a esa ejecución del cuerpo del bucle. Así, cuando la suma se calcula más tarde, cada función callback hace referencia 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