Curso IT Fundamentos JavaScript 042_Bucles while, for

Las sentencias de bucle son métodos para ejecutar repetidamente un bloque de código. JavaScript proporciona diferentes tipos de sentencias de bucle como while, do-while, for, etc. Un cuerpo de bucle completo incluye: expresión de inicialización, condición de bucle e iterador.

Bucle `while`

El bucle while se usa para ejecutar repetidamente un segmento de código mientras la condición sea true. La ejecución única del cuerpo del bucle se llama una iteración. Cualquier expresión o variable puede ser una condición de bucle, la condición de bucle se evalúa y el resultado se convierte en un valor booleano. Similar a if, si el cuerpo del bucle tiene solo una sentencia, también se pueden omitir las llaves {…}, pero esto no se recomienda. Antes de cada iteración se verifica la condición.

Ejemplo:

1
let i = 0; // Expresión de inicialización, normalmente se usa para declarar la variable contador, si no existe se reportará undefined
2
while (i < 5) { // Condición de bucle, si es `true`, el bucle continuará ejecutándose
3
  console.log(i);
4
  i++; // Iterador, normalmente se usa para actualizar la variable contador y coincidir con la condición de bucle
5
}

Ejemplo de bucle infinito:

1
let i = 0;
2
  while (1) { // La condición siempre es true, entrará en bucle infinito
3
    console.log(i);
4
    i++; // Normalmente se aplica esta forma de actualización de contador a la condición de bucle
5
    if (i >= 5) break;  // Comente esto para entrar en modo de bucle infinito
6
}

Bucle `do-while`

El bucle do-while es similar al bucle while, pero primero ejecuta el cuerpo del bucle una vez y luego verifica si la condición es true. Si la condición es verdadera, continúa ejecutando el cuerpo del bucle. Tenga en cuenta los escenarios de uso: use do-while solo cuando necesite ejecutar al menos una vez el cuerpo del bucle, independientemente de si la condición es verdadera o no. Para otros escenarios, se recomienda el bucle while. Después de cada iteración se verifica la condición.

Ejemplo:

1
let i = 0;
2
do {
3
  console.log(i);
4
  i++;
5
} while (i < 5);

Bucle `for`

El bucle for es una estructura de bucle más compleja pero también la más comúnmente aplicada, utilizada para ejecutar repetidamente un segmento de código. El bucle for incluye tres partes: expresión de inicialización, condición de bucle e iterador. A continuación se muestra la sintaxis básica del bucle for: Antes de cada iteración se verifica la condición, se pueden usar otras configuraciones.

Ejemplo:

1
for (let i = 0; i < 5; i++) {
2
  console.log(i);
3
}

Ejemplo de bucle infinito:

1
let i = 0;
2
  for ( ; ; ) { // Cuando se omiten todas las condiciones, entrará en bucle infinito
3
    console.log(i);
4
    i++; // Normalmente se aplica esta forma de actualización de contador a la condición de bucle
5
  if (i >= 5) break;  // Comente esto para entrar en modo de bucle infinito
6
}

Omitir segmentos de sentencias

En el bucle for se puede omitir la expresión de inicialización, la condición de bucle o el iterador, uno o varios, pero los puntos y coma ; deben conservarse. Los puntos y coma se usan para separar cada parte, al omitir una parte aún se necesita conservar el punto y coma correspondiente.

Ejemplo:

1
let x = 0;
2
for (; x < 5; x++) {
3
  console.log(x);
4
}
5
// Se omite la expresión de inicialización y se mueve fuera del bucle, el bucle sigue siendo válido
6

7
let y = 0;
8
for (;; y++) {
9
  if (y >= 5) {
10
    break;
11
  }
12
  console.log(y);
13
}
14
// Se omite la condición de bucle, el bucle se termina mediante la sentencia `if` y `break`
15

16
let z = 0;
17
for (; z < 5;) {
18
  console.log(z);
19
  z++;
20
}
21
// Se omite el iterador y se mueve al cuerpo del bucle, el bucle sigue siendo válido

Bucles anidados

Los bucles anidados significan que dentro de un cuerpo de bucle se contiene otra estructura de bucle completa. Cada vez que se ejecuta el bucle externo, el bucle interno se ejecuta completamente una vez.

Ejemplo de triángulo rectángulo:

1
// Ejemplo A
2
for (let i = 1; i <= 5; i++) { // Bucle externo, controla el número de filas, de 1 a 5.
3
  let row = ''; // Cada vez que se ejecuta el bucle externo, se crea una cadena vacía `row` para almacenar las estrellas de la fila actual.
4
  for (let j = 1; j <= i; j++) { // Bucle interno, controla el número de estrellas por fila, de 1 al número de fila actual `i`.
5
    row += '⭐ '; // Añade la estrella a `row`, formando la cadena de estrellas de la fila actual.
6
  }
7
  console.log(row); // Imprime la cadena de estrellas de la fila actual.
8
}

1
// Ejemplo B
2
for (let i = 1; i <= 5; i++) { // Bucle externo representa el número de filas
3
    for (let j = 1; j <= i; j++) { // Bucle interno representa las columnas
4
        document.write('⭐'); // Usa estrella como elemento gráfico
5
    }
6
    document.write('</br>'); // Salto de línea
7
}

Ejemplo de triángulo invertido:

1
// Ejemplo A
2
for (let i = 5; i >= 1; i--) { // Bucle externo, controla el número de filas, de 1 a 5.
3
  let row = ''; // Cada vez que se ejecuta el bucle externo, se crea una cadena vacía `row` para almacenar las estrellas de la fila actual.
4
  for (let j = 1; j <= i; j++) { // Bucle interno, controla el número de estrellas por fila, de 1 al número de fila actual `i`.
5
    row += '* ';  // Añade la estrella a `row`, formando la cadena de estrellas de la fila actual.
6
  }
7
  console.log(row);  // Imprime la cadena de estrellas de la fila actual.
8
}

1
// Ejemplo B
2
for (let i = 1; i <= 5; i++) { // Bucle externo representa el número de filas
3
    for (let j = 0; j <= 5 - i; j++) { // Bucle interno representa las columnas
4
        document.write('⭐'); // Usa estrella como elemento gráfico
5
    }
6
    document.write('</br>'); // Salto de línea
7
}

`break` termina (finaliza, sale) el bucle

break se usa para terminar (finalizar, salir) el bucle actual o sentencia switch. Si no hay break, continuará ejecutando los case posteriores (es decir, ocurre el fenómeno de “penetración”).

La combinación “bucle infinito + break” es adecuada para situaciones donde no es necesario verificar la condición al inicio/final del bucle, pero se necesita verificar la condición en el medio o incluso en múltiples posiciones del cuerpo.

Ejemplo:

1
let count = 0;
2
while (true) {
3
  console.log("En el bucle...");
4
  // Simula una condición, cuando se cumple sale del bucle
5
  if (count === 5) {
6
    console.log("Condición cumplida, saliendo del bucle");
7
    break;
8
  }
9
  count++;
10
}

`continue` continúa con la siguiente iteración (salta la actual)

continue se usa para terminar prematuramente la iteración actual en un bucle y continuar con la siguiente iteración. continue es la “versión ligera” de break. No detiene todo el bucle, sino que detiene solo esta iteración actual y fuerza el inicio de una nueva iteración (si la condición lo permite).

Ejemplo:

1
for (let i = 0; i < 8; i++) {
2
    if (i % 2 === 0) {
3
        continue; // Cuando i módulo 2 es igual a 0, salta la iteración actual y continúa con la siguiente iteración
4
    }
5
    console.log(i);
6
}

Bucle while

Bucle do-while

Bucle for

Omitir segmentos de sentencias

Bucles anidados

break termina (finaliza, sale) el bucle

continue continúa con la siguiente iteración (salta la actual)

Comentarios

Bucle `while`

Bucle `do-while`

Bucle `for`

`break` termina (finaliza, sale) el bucle

`continue` continúa con la siguiente iteración (salta la actual)