Estructuras de control: Bucles
Hasta ahora hemos aprendido a tomar decisiones utilizando estructuras como if, else, switch o el operador ternario. Sin embargo, en muchas ocasiones no basta con decidir qué hacer una sola vez, sino que necesitamos repetir una acción varias veces.
Para resolver este tipo de problemas existen los bucles.
Los bucles permiten ejecutar un mismo bloque de código una o varias veces sin necesidad de escribirlo repetidamente.
Gracias a ellos podemos recorrer listas de datos, repetir cálculos, mostrar información, validar entradas de un usuario y realizar multitud de tareas habituales en programación.
Explicación
Imagina que queremos mostrar el mensaje "Hola".
console.log("Hola");
¿Y si queremos mostrarlo 30 veces seguidas?
Si tuviera que escribirla 30 veces manualmente, perdería mucho tiempo.
En lugar de copiar el mismo código una y otra vez, utilizamos un bucle para repetir una acción automáticamente.
Por ejemplo, sin un bucle podríamos hacer algo así:
console.log("Hola");
console.log("Hola");
console.log("Hola");
console.log("Hola");
console.log("Hola");
// hasta 30
Funciona, pero no es una buena solución.
Con un bucle podremos indicar algo parecido a:
"Repite este bloque 30 veces."
De esta forma el código será mucho más corto, fácil de leer y sencillo de modificar.
Todos los bucles responden a la misma idea: ejecutar un bloque de código varias veces mientras se cumpla una condición o hasta completar un número determinado de repeticiones.
Los bucles suelen responder a alguna de estas preguntas:
- ¿Cuántas veces quiero repetir una acción?
- ¿Quiero repetir mientras ocurra una determinada condición?
- ¿Necesito recorrer todos los elementos de una colección?
Dependiendo del problema utilizaremos un tipo de bucle u otro.
Los principales bucles de JavaScript son:
forwhiledo...whilefor...offor...in
¿Qué tienen en común todos los bucles?
Aunque existen varios tipos, todos siguen el mismo proceso.
- Comienzan su ejecución.
- Ejecutan un bloque de código.
- Comprueban si deben seguir repitiéndose.
- Si deben continuar, vuelven a ejecutar el bloque.
- Cuando dejan de cumplirse las condiciones, el programa sale del bucle y continúa con la siguiente instrucción.
Podemos representarlo de forma sencilla:
Inicio
│
▼
Ejecutar código
│
▼
¿Debe repetirse?
├── Sí → volver al inicio del bloque para repetirlo
└── No → continuar el programa
¿Por qué son tan importantes?
Los bucles aparecen constantemente en programas reales.
Por ejemplo:
- Mostrar todos los productos de una tienda.
- Leer todos los mensajes de un chat.
- Calcular la nota media de una clase.
- Procesar miles de registros de una base de datos.
- Recorrer los píxeles de una imagen.
- Buscar un elemento dentro de una lista.
- Generar informes automáticamente.
Sin los bucles, la mayoría de estos programas serían muy difíciles de desarrollar.
Elegir el bucle adecuado
No todos los bucles sirven para las mismas situaciones.
| Bucle | Cuándo utilizarlo |
|---|---|
for | Cuando conocemos el número de repeticiones. |
while | Cuando repetimos mientras una condición sea verdadera. |
do...while | Cuando el código debe ejecutarse al menos una vez. |
for...of | Cuando queremos recorrer los valores de una lista o array. |
for...in | Cuando queremos recorrer las propiedades de un objeto. |
Con la práctica aprenderás a elegir el más adecuado casi de forma automática.
Sintaxis
Todavía no vamos a estudiar la sintaxis concreta de cada bucle.
De forma general, todos siguen una estructura similar.
Comienza el bucle
↓
Ejecuta un bloque de código
↓
Comprueba si debe continuar
↓
Si es necesario, vuelve a repetir
En los siguientes apartados aprenderemos la sintaxis específica de cada uno.
Resumen
Los bucles permiten repetir automáticamente un bloque de código sin necesidad de escribirlo varias veces.
Gracias a ellos conseguimos programas más cortos, más fáciles de mantener y con menos posibilidades de cometer errores.
En los próximos apartados aprenderemos a utilizar cada uno de los bucles de JavaScript y veremos en qué situaciones conviene emplear cada uno de ellos.