Bucles

Introducción

Los bucles permiten ejecutar un mismo bloque de instrucciones de forma repetida mientras se cumpla una determinada condición o durante un número conocido de iteraciones.

Al igual que ocurre con las estructuras condicionales, los bucles ya se estudiaron en el módulo de Programación utilizando Java. En este capítulo repasaremos su sintaxis en JavaScript y algunas recomendaciones de uso.

JavaScript dispone de tres estructuras iterativas principales:

• while
• do...while
• for

En unidades posteriores estudiaremos otros mecanismos de iteración específicos del lenguaje, como for...of y los métodos de los arrays (forEach(), map(), filter(), etc.).

El bucle while

El bucle while ejecuta un bloque de código mientras una condición sea verdadera.

Sintaxis

while (condition) {
  // Statements
}

La condición se evalúa antes de cada iteración. Si inicialmente es falsa, el cuerpo del bucle no llegará a ejecutarse.

let counter = 1;

while (counter <= 5) {
  console.log(counter);
  counter++;
}

Salida:

1
2
3
4
5

Es responsabilidad del programador actualizar la variable de control para que la condición termine siendo falsa. De lo contrario, el bucle continuará ejecutándose indefinidamente.

WARNING

Un bucle infinito puede bloquear la ejecución del programa o hacer que el navegador deje de responder.

El bucle do...while

El bucle do...while es similar a while, con la diferencia de que la condición se evalúa después de ejecutar el cuerpo del bucle.

Sintaxis

do {
  // Statements
} while (condition);

Esto garantiza que el bloque de instrucciones se ejecute al menos una vez.

let counter = 1;

do {
  console.log(counter);
  counter++;
} while (counter <= 5);

La principal diferencia entre ambos bucles puede apreciarse cuando la condición es inicialmente falsa.

let counter = 10;

while (counter <= 5) {
  console.log(counter);
}

do {
  console.log(counter);
} while (counter <= 5);

En este ejemplo, el bloque while no se ejecuta ninguna vez, mientras que el bloque do...while se ejecuta una única vez.

TIP

Utiliza do...while únicamente cuando necesites garantizar que el cuerpo del bucle se ejecute al menos una vez. En el resto de situaciones, while suele resultar más habitual.

El bucle for

El bucle for se utiliza cuando el número de iteraciones es conocido o puede determinarse antes de comenzar la ejecución.

Sintaxis

for (initialization; condition; update) {
  // Statements
}

Las tres partes del encabezado del bucle tienen una función bien diferenciada:

• Inicialización: se ejecuta una única vez antes de comenzar el bucle.
• Condición: se evalúa antes de cada iteración.
• Actualización: se ejecuta al finalizar cada iteración.

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

Salida:

1
2
3
4
5

Aunque es habitual utilizar una variable llamada i (index), puede emplearse cualquier identificador significativo.

Declarar la variable de control

Lo más habitual es declarar la variable de control dentro del propio bucle.

for (let i = 0; i < 10; i++) {
  console.log(i);
}

De este modo, la variable solo existe durante la ejecución del bucle.

También es posible declarar la variable previamente.

let i = 0;

for (; i < 10; i++) {
  console.log(i);
}

No obstante, esta opción suele utilizarse únicamente cuando la variable debe seguir estando disponible después del bucle.

Modificar el incremento

La expresión de actualización no tiene por qué incrementar la variable en una unidad.

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

Salida:

0
2
4
6
8
10

También es posible recorrer una secuencia en sentido descendente.

for (let i = 5; i >= 1; i--) {
  console.log(i);
}

Las sentencias break y continue

break

La sentencia break finaliza inmediatamente el bucle.

for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break;
  }

  console.log(i);
}

Salida:

1
2
3
4

continue

La sentencia continue interrumpe únicamente la iteración actual y continúa con la siguiente.

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i);
}

Salida:

1
2
4
5

Bucles anidados

Es posible utilizar un bucle dentro de otro. En este caso, por cada iteración del bucle exterior se ejecuta completamente el bucle interior.

for (let row = 1; row <= 3; row++) {
  for (let column = 1; column <= 2; column++) {
    console.log(row, column);
  }
}

Salida:

1 1
1 2
2 1
2 2
3 1
3 2

Los bucles anidados son frecuentes cuando se trabaja con estructuras bidimensionales, como tablas o matrices.

¿Qué bucle utilizar?

Cada tipo de bucle está pensado para una situación diferente.

Situación	Bucle recomendado
Se desconoce el número de iteraciones.	while
El cuerpo debe ejecutarse al menos una vez.	do...while
Se conoce el número de iteraciones.	for

En JavaScript, el bucle for es el más utilizado cuando se necesita repetir una acción un número determinado de veces.

Buenas prácticas

• Utiliza nombres descriptivos para las variables de control cuando mejoren la legibilidad.
• Evita modificar la variable de control desde varios puntos del bucle.
• Comprueba siempre que la condición terminará siendo falsa para evitar bucles infinitos.
• Utiliza break y continue únicamente cuando simplifiquen la lógica del programa.
• Elige el tipo de bucle que mejor exprese la intención del código.

Resumen

• while evalúa la condición antes de cada iteración.
• do...while garantiza al menos una ejecución del bloque.
• for integra la inicialización, la condición y la actualización en una única sentencia.
• break finaliza el bucle de forma inmediata.
• continue omite la iteración actual y continúa con la siguiente.
• Los bucles pueden anidarse para resolver problemas más complejos.
• Escoger el bucle adecuado mejora la claridad y el mantenimiento del código.